不透明度傳播

我遇到了問題。我想要內容div的透明背景。但並非全部內容。我不能得到這個工作：不透明度傳播

<div class="notTransparent"> <div class="transparent"></div> content </div>

是否有另一種解決方法？

來源

2010-10-08 dododedodonl

也許你也可以發佈'.transparent'和'.notTransparent'的CSS規則？ – 2010-10-08 23:40:30

只是爲了澄清;你沒有你的'div'標籤嗎？你說的是外面透明的，但裏面是不透明的，對吧？ – 2010-10-08 23:40:47

@Andrew Barber：我認爲divs是正確的方式 - 我認爲dododedodonl（我應該得到一個提高評分只是爲了拼寫正確！）是他們希望單詞「content」不透明，但是後面的div稍微透明。這樣一個稍微褪色的背景可以放在單詞「內容」後面。但是，這個詞應該在它自己的div中，就像我的答案一樣。結果是外面板後面的任何東西都看不見，透明格內的任何東西都會稍微褪色，而外面的任何東西都是完全不透明的。 – ClarkeyBoy 2010-10-10 22:44:07

我想我已經做到了這一點（雖然它是很久以前）。你所做的是有一個與顯示div：relative，然後另一個div與顯示：絕對，左：0px，頂：0px，寬度：100％，高度：100％。也許應用z-index：-10（將其放在所有其他內容之後）。然後，您將正常情況下的頂級（相對）div內的內容。給我幾分鐘，我會制定出亞代碼...

好做到這一點 - 請嘗試以下操作：

.transparent { 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
} 
.opaque { 
    position: relative; 
} 
.content { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
} 

<div class="opaque"> 
    <div class="transparent"> 
     <img src="/Images/header1.png"/> 
    </div> 
    <div class="content"> 
     Hello world! 
    </div> 
</div>

可惜我不能找到一種方法，將一個相對元素在透明DIV。如果有人找到方法，請在此處粘貼代碼。順便說一下，實際上不需要指定任何z索引。

來源

2010-10-08 23:41:01 ClarkeyBoy

CSS RGBA

http://www.css3.info/preview/rgba/ http://www.css3.info/preview/opacity/

來源

2010-10-08 23:41:03 Dave

這是否在IE 6,7,8？ – dododedodonl 2010-10-09 00:04:27

沒有。對於IE7 +，您可以使用透明（1x1）PNG作爲條件樣式表中的回退。對於IE6，除非你正在爲中國或印度建立一個網站，否則就不要這麼做。 – Dave 2010-10-09 00:27:37

我也遇到了繼承問題的透明度而回，這並獲得成功對我來說：http://blog.ninanet.com/2010/04/27/css-transparency-inheritance-hack （demo）。

來源

2010-10-08 23:41:24 Alec

不透明度傳播

回答

相關問題