透明背景，明文？

一段時間以來，我一直在對這個問題感興趣。對於網站的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

透明背景，明文？

回答

相關問題