透明背景，明文？

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

如果我走专有的东西，文本最终也受到影响，这是行不通的。

该网站需要在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>

来源

2010-10-25 C Bauer

你能显示标记和CSS？ – AGoodDisplayName 2010-10-25 18:35:40

对，对不起，我有点灼伤。 – 2010-10-25 18:48:21

现代浏览器（火狐，Chrome，Safari浏览器，Opera）的支持，RGBA：

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

的以上的CSS规则将设置为4 P元素上0％半透明白色背景。

但是，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

来源

2010-10-25 18:39:01

需要40％。更新了问题以反映它。 – 2010-10-25 18:43:06

我认为'r，g，b'颜色值被限制为'0'''255'？ – 2010-10-25 19:00:31

@大卫是的，我的错误:) – 2010-10-25 19:03:13

CSS不透明度会影响前景和背景。如果你想有背景半透明，并同时保持文本不透明，你应该看看CSS3 RGBA色彩值：

的div p {背景：RGBA（255,255,255，.5）}

来源

2010-10-25 18:45:21 Unless

透明背景，明文？

回答

相关问题