透明背景,明文？

Question

我一直在撞击这个人.对于网站的CSS重新设计,我需要父div使用背景图像,然后是具有透明背景的ap child,但前景文本需要保持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,所以你必须为该浏览器使用另一种解决方法.IE6中的透明背景png图像问题