Question

有没有办法以跨浏览器兼容的方式实现这种效果，而无需准备分离的图像？

基本上文本所在的框架具有50％不透明度的白色叠加..我想要一个除了背景之外不涉及创建任何其他图像的解决方案，但我不知道它是否可能！< / p>

alt text

Answer 1

尝试RGBA，例如

div { background-color: rgba(255, 255, 255, 0.5); }

与往常一样，这在每次编写的浏览器中都不起作用。

Answer 2

如果由于浏览器支持而无法使用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>

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

2 个答案: