在 html/css 中实现白色不透明效果
Posted
技术标签:
【中文标题】在 html/css 中实现白色不透明效果【英文标题】：Achieving white opacity effect in html/css 【发布时间】：2011-04-27 12:44:06 【问题描述】：有没有办法以跨浏览器兼容的方式实现这种效果，而无需准备分离的图像？
基本上，文本所在的框架有一个 50% 不透明度的白色叠加层。我想要一个不涉及创建除背景之外的任何其他图像的解决方案，但我不知道这是否可能！
【问题讨论】：
CSS: Styling visited images cross browser way / cross browser opacity 的可能重复项 查看骗局。不过，您必须将黑色文本放入单独的 DIV 中 但请注意，IE6 的过滤器确实是资源吸盘（IE6 工作站可能没有太多可用的资源）。 使用 opacity 我可以改变背景白色 DIV 的 alpha 但我怎样才能让文本保持黑色？我将它放在具有背景的 DIV 中，但如果我通过 CSS 覆盖它，它也会继承不透明度 CSS3 不透明度规则将级联以包含您的文本；但是 Bobby Jack 的答案中的 RGBA 背景颜色不会，给你一个 50% bgnd 不透明度和完全不透明度的文本。 【参考方案1】：如果由于浏览器支持而无法使用rgba，并且不想包含半透明的白色PNG，则必须创建两个定位元素。一个用于白色框，不透明，另一个用于覆盖文本，实心。
body background: red;
.box position: relative; z-index: 1;
.box .back
position: absolute; z-index: 1;
top: 0; left: 0; width: 100%; height: 100%;
background: white; opacity: 0.75;
.box .text position: relative; z-index: 2;
body.browser-ie8 .box .back filter: alpha(opacity=75); <!--[if lt IE 9]><body class="browser-ie8"><![endif]-->
<!--[if gte IE 9]><!--><body><!--<![endif]-->
<div class="box">
<div class="back"></div>
<div class="text">
Lorem ipsum dolor sit amet blah blah boogley woogley oo.
</div>
</div>
</body>【讨论】：
【参考方案2】：试试 RGBA，例如
div background-color: rgba(255, 255, 255, 0.5);
与往常一样，这并不适用于曾经编写的每一个浏览器。
【讨论】：
可以工作，但它与 IE 不兼容，所以我不得不使用 1 像素的背景图像和 50% 的 alpha。无论如何谢谢:)以上是关于在 html/css 中实现白色不透明效果的主要内容，如果未能解决你的问题，请参考以下文章
QT下的几种透明效果（QPalette背景白色，窗口设置setWindowOpacity，QPainter使用Clear模式绘图）