CSS不透明度和子元素
CSS不透明度和子元素
提问于 2010-04-01 23:19:06
<style type="text/css">
div#foo {
background: #0000ff;
width: 200px;
height: 200px;
opacity: 0.30;
filter: alpha(opacity = 30);
}
div#foo>div {
color: black;
opacity:1;
filter: alpha(opacity = 100);
}
</style>
<div id="foo">
<div>Lorem</div>
<div>ipsum</div>
<div>dolor</div>
</div>在上面的示例中，div#foo的不透明性由子元素继承，导致文本变得几乎不可读。我认为说它是继承的是错误的，不透明度应用于父div和子元素是其中的一部分，所以尝试为子元素覆盖它是行不通的，因为从技术上讲，它们是不透明的。
在这种情况下，我通常只使用alpha png背景图像，但今天我想知道是否有更好的方法来使div的背景半透明而不影响内容。
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-04-01 23:23:26
您可以使用rgba()。
div#foo
{
background: rgba(0, 0, 255, 0.3);
}要使其在旧的Internet Explorer中工作，请使用CSS PIE。有some limitations，但它们是以向后兼容的方式处理的:RGB值将被正确渲染，而不透明度将被忽略。
Stack Overflow用户
发布于 2010-12-15 22:10:43
最好的方法是将透明png设置为背景。
Stack Overflow用户
发布于 2010-04-01 23:34:07
如果你使用不透明度，你必须将它们放在单独的DIV中，然后将它们排列在一起。背景DIV具有较低的不透明度，而前景DIV将使您的内容具有100%的不透明度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2561460
复制相关文章
相似问题