Question

一段时间以来，我一直在撞击这个人。对于网站的CSS重新设计，我需要父div使用背景图像，然后是具有透明背景的p子，但前景文本需要保持100％不透明度。我尝试制作半透明（40％）白色的1px图像，但与背景图像一起使用时不会显示。我已经证实这与重复关闭无关。

如果我使用专有内容，文本最终也会受到影响，但这不起作用。

该网站需要在2个设计之间切换，因此我无法将文本移动到另一个子元素中。

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 {background：rgba（255,255,255，.5）}

透明背景，明文？

2 个答案: