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

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屋！