在 html/css 中实现白色不透明效果答案

【问题标题】：Achieving white opacity effect in html/css在 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。无论如何谢谢:)