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＃富的不透明性是由子元素继承，导致文本变得几乎无法读取。我想这是错误的说法它是继承，不透明度应用于父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.

我通常只使用一个字母为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);
}

要使其在老的互联网探索者工作使用 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屋！