CSS 不透明度和子元素

发布于 2024-08-27 13:15:10 字数 623 浏览 8 评论 0原文

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

原文

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

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.

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

献世佛 2024-09-03 13:15:10

您可以使用rgba()。

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

要使其在旧版 Internet Explorer 中工作，请使用 CSS PIE。有一些限制，但这些限制是以向后兼容的方式处理的： RGB 值将被正确渲染，并且不透明度将被忽略。

You may use rgba().

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

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.

回复收藏 0 原文