CSS 不透明度和子元素 [英] CSS opacity and child elements

问题描述

<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 并且子元素是其中的一部分，因此尝试为子元素覆盖它是行不通的，因为从技术上讲它们是不透明的.

In the above example, the opacity of div#foo is inherited by child elements, causing the text to become nearly unreadable. I suppose it's wrong to say it is inherited, the opacity is applied to the parent div and the children are part of that, so attempting to override it for the child elements doesn't work because technically they are opaque.

在这种情况下，我通常只使用 alpha png 背景图像，但今天我想知道是否有更好的方法使 div 的背景半透明而不影响内容.

I typically just use an alpha png background image in such cases, but today i'm wondering if there's a better way to make a background of a div semi-transparent without affecting the contents.

推荐答案

您可以使用 rgba().

div#foo
{
    background: rgba(0, 0, 255, 0.3);
}

要使其在旧 Internet Explorer 中运行，请使用 CSS PIE.有一些限制，但这些都是以向后兼容的方式处理的:RGB 值将被正确渲染，不透明度将被忽略.

To make it work in old Internet Explorers use CSS PIE. There are some limitations, but those are handled in a backwards compatible way: the RGB value will be rendered correctly and the opacity will be ignored.

这篇关于CSS 不透明度和子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！