在 html/css 中实现白色不透明效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3969380/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Achieving white opacity effect in html/css
提问by Hyman
is there a way to achieve this effect in a cross-browser compatible way without having to prepare separated images?
有没有办法以跨浏览器兼容的方式实现这种效果而无需准备分离的图像？
Basically the frame on which text lays has a white overlay of 50% opacity.. I would like a solution that doesn't involve creating any other image in addition to the background but I don't know if it's possible!
基本上，文本所在的框架具有 50% 不透明度的白色叠加层。我想要一个不涉及创建除背景之外的任何其他图像的解决方案，但我不知道是否可能！
回答by Bobby Hyman
Try RGBA, e.g.
尝试 RGBA，例如
div { background-color: rgba(255, 255, 255, 0.5); }
As always, this won't work in every single browser ever written.
与往常一样，这不会在有史以来编写的每个浏览器中都有效。
回答by bobince
If you can't use rgbadue to browser support, and you don't want to include a semi-transparent white PNG, you will have to create two positioned elements. One for the white box, with opacity, and one for the overlaid text, solid.
如果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>