CSS不透明度和子元素

<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的背景半透明而不影响内容。

解决方法

你可以使用 rgba()
div#foo
{
    background: rgba(0,255,0.3);
}

使它在旧的Internet Explorers工作使用CSS PIE.有some limitations,但这些是以向后兼容的方式处理:RGB值将被正确渲染,不透明度将被忽略。

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...