Question

我的文字背后有白色背景。我已经使用CSS来重新定位。我希望背景的不透明度为.3，但它会影响前景，即使在html中它有不同的区别。我是css方面的新手，期待那些有更多专业知识的人的回应。

部分HTML是：

...
<p><span>Fri</span><span>When Announced</span></p>
<p><span>Sat</span><span>Open</span></p>

</div>

<div class=...
<img src="img/cross.png" alt="Cross" width="340" height="465"/>
</div>

<div id="bkgrnd"></div>

<div id="clear"></div>

</section>

...

css是：

    #bkgrnd{
    background-color:#fff;
    border:1px solid #000;
    box-shadow:#332315 .3em .4em .2em;
    opacity: 0.3;
    width:750px;
    height:526px;
    margin-left:89px;
    margin-top:-55px;
    z-index:-2;
    }

Answer 1

为了不再继承不透明度，您需要使用RGBa（alpha通道）而不是不透明度。

请参阅：http://www.css3.info/introduction-opacity-rgba/

请注意旧版浏览器不支持Alpha通道。您可能需要制作CSS后备。

Answer 2

使用opacity会影响所有子元素。您应该在背景属性上使用rgba，如下所示：

background-color: rgba(255, 255, 255, 0.3);

这将使用background-color白色，不透明度为30％。

Answer 3

查看有关使用RGBa而不是opacity取消继承的文章：

http://acidmartin.wordpress.com/2010/11/21/using-rgba-to-prevent-the-css-opacity-inheritance-from-parent-to-child-elements/

本文解释了如何处理IE 5-8的RGBa变通办法

CSS背景不透明度问题

3 个答案: