在html/css中实现白色不透明效果
有没有办法以跨浏览器兼容的方式实现这种效果,而无需准备分离的图像？
基本上文本所在的框架具有50%不透明度的白色叠加..我想要一个除了背景之外不涉及创建任何其他图像的解决方案但我不知道它是否可能!
Bob*_*ack 72
试试RGBA,例如
div { background-color: rgba(255, 255, 255, 0.5); }
与往常一样,这在每次编写的浏览器中都不起作用.
如果由于浏览器支持而无法使用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>