父div透明背景但不影响子div透明度 [英] Parent div transparent background but not affect child div transparency

问题描述

<div class="container">
    <div class="site_content">
        some stuff, images etc
    </div>
</div>


.container{
    background-color:#333;
    }

我想要的是让.container div具有不透明度80％，但.site_content的内容为100％

What I'd like is to have the .container div to have opacity of 80%, but the content of .site_content to be at 100%

设置css透明度会影响所有子元素。有办法这样做吗？使用jQuery？

Setting css opacity affects all child elements. Is there a way do this? With jQuery?

由于将如何使用，我宁愿避免将另一个透明div放在后面以实现效果的技术。

Because of how this will be used, I'd prefer to avoid the technique of positioning another transparent div behind to achieve the effect.

推荐答案

您需要在容器div上使用RGBA背景属性。 background：rgba（64，64，64，0.5）。 64,64,64是RGB颜色值。 0.5是不透明度值。现在父母可以拥有自己的不透明度值不影响儿童。这是完全支持的FireFox，Opera，Chrome，Safari和IE9。

You need to use the RGBA background property on the container div. background: rgba(64, 64, 64, 0.5). 64, 64, 64 are the RGB color values. and 0.5 is the opacity value. Now parent can have it's own opacity value not affecting children. This is fully supported by FireFox, Opera, Chrome, Safari and IE9.

要支持IE 5.5到8，我们需要使用供应商特定的CSS'渐变过滤器：'所以你需要添加这个。

To support IE 5.5 to 8 we need to use vendor-specific CSS 'gradient filter:' So you need to add this.

filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃7f404040，endColorstr =＃7f404040）;

其中7f表示127，即50％不透明度和404040是颜色。

Where 7f represents 127, i.e. 50% opacity and 404040 is the color.

这篇关于父div透明背景但不影响子div透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！