透明背景，明文？

Question

我用头撞这个已经有一阵子了。对于一个网站的CSS重新设计我需要一个父div有一个背景图像后面是一个透明的背景，但前景文本需要保持在100%的不透明度。我试着制作一个1px的半透明(40%)白色的图像，但当与背景图像一起使用时，它不会显示出来。我已经证实了这与重复关闭无关。

如果我使用专有的东西，文本也会受到影响，这是不起作用的。

网站需要在两个设计之间切换，这样我就不能将文本移动到另一个子元素中。

JQuery的使用率很高，如果这对我有帮助的话，那就太好了。

标记：

CSS：

.titles
{
    background-color: #FFF;
    background-image: URL("../images/Vessel_TitleBackground.jpg");
    padding-top: 2px;
    font-weight: bolder;
    text-align: left;
}
.titles p
{
    text-indent: 2%;
    background-color: #FFF;
    filter:alpha(opacity=60); 
    -moz-opacity: 0.6; 
    opacity: 0.6;
    font-size: 1.1em;
    color: #000;
}

HTML：

<div>
    <div class="titles">
        <p>YEY</p>
    </div>
    <div class="contents">YEY
    </div>
</div>

Answer 1

现代浏览器(Firefox、Chrome、Safari、Opera)支持RGBA：

#container p { background-color:rgba(255,255,255,0.4); }  

上面的CSS规则将在P元素上设置40%的半透明白色背景。

但是，IE8及更低版本不支持此功能(IE9将提供支持)。因此，您需要解决IE的问题。你可以使用IE条件注释为IE8及以下版本定义一个额外的CSS规则，这将设置一个半透明的图像...

<!--[if lt IE 9]>
<style>
    #container p { background-image:url(dot.png); }
</style>
<![endif]-->

如果你在制作半透明图片时遇到困难，这里有一个演示：http://vidasp.net/tinydemos/img-40-percent-transparent.html

顺便说一句，IE6不支持半透明的PNG，所以你必须为该浏览器使用另一种变通方法。Transparent background png image issue in IE6

Answer 2

CSS不透明度会同时影响前景和背景。如果你想让背景半透明，同时保持文本不透明，你应该检查CSS3 rgba颜色值：

div p{背景: rgba(255,255,255，.5)}