在HTML/CSS中实现白色不透明效果

Question

在HTML/CSS中实现白色不透明效果

htmlcssopacity

45

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

基本上，文本所在的框架有一个50%不透明度的白色覆盖层.. 我想找到一种解决方案，不需要创建任何其他图像，除了背景之外。但我不知道是否可能！

alt text

- Jack

可能是重复的问题：CSS：如何跨浏览器设置已访问图片样式和跨浏览器设置不透明度。 - Pekka

看看重复项。不过你需要把黑色文本放到单独的 DIV 中。 - Pekka

但请注意，IE6的过滤器确实会消耗大量资源（而IE6工作站可能没有太多闲置资源）。 - Hannes

1

使用不透明度，我可以改变白色背景DIV的alpha值，但是如何保持文本为黑色呢？我将其放置在具有背景的DIV内部，但即使我通过CSS覆盖它，它仍会继承不透明度。 - Jack

3

CSS3中的不透明度规则会延伸到您的文本上，但Bobby Jack的答案中的RGBA背景颜色不会，这将使您的背景具有50%的不透明度和完全不透明的文本。 - Moses

2个回答

5

If you can't use rgba due 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.

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>

- bobince

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bobby Jack · Accepted Answer

尝试使用RGBA，例如：

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

像往常一样，这并不能在所有已编写的浏览器中都起作用。