2012-06-08 193 views
0

獎金道具讓誰能弄清楚爲什麼這不起作用。出於某種原因,我的文本「即內容,菜單,頁腳」繼承了不透明性,並不是坐在一個不透明的地方,並且完全可見。使透明文字透明的CSS透明

我有它設置爲兩個是類和ID我都試過兩種方式,和我相當的CSS實際上

<style type="text/css"> 
div#page { 
    border:0px solid purple; 
    width:700px; 
    margin:0 auto; 
    padding:5px; 
    text-align:left; 
    background-image:url('images/layout.jpg'); 
} 
div { 
    text-align:center; 
} 
div#header { 
    border:2px solid red; 
    width:695px; 
    height:30px; 
} 
div#mostpop { 
    border:2px solid black; 
    width:195px; 
    float:Right; 
    margin:10px 0px 10px 5px; 
    height:245px; 
    background-color:#ffffff; 
    opacity:0.7; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
} 
div#recent { 
    border:2px solid black; 
    width:195px; 
    float:Right; 
    margin:10px 0px 10px 0px; 
    height:245px; 
    position: relative; 
    left: 204px; 
    top: 255px; 
    background-color:#ffffff; 
    opacity:0.7; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
} 
div#content { 
    border:2px solid black; 
    width:495px; 
    margin:10px 0 10px 0px; 
    min-height:500px; 
    background-color:#ffffff; 
    opacity:0.7; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
} 
div#footer { 
    border:2px solid black; 
    width:695px; 
    height:30px; 
    background-color:#ffffff; 
    opacity:0.7; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
div.recent p 
    { 
    margin:30px 40px; 
    font-weight:bold; 
    color:#000000; 
    opacity:1; 
} 
div.content p 
    { 
    margin:30px 40px; 
    font-weight:bold; 
    color:#000000; 
    opacity:1; 
} 
div.mostpop p 
    { 
    margin:30px 40px; 
    font-weight:bold; 
    color:#000000; 
    opacity:1; 
} 
div.footer p 
    { 
    margin:30px 40px; 
    font-weight:bold; 
    color:#000000; 
    opacity:1; 
} 
div.header p 
    { 
    margin:30px 40px; 
    font-weight:bold; 
    color:#000000; 
    opacity:1; 
} 
</style> 
<div id="page"> 
<!--<div id="header">Header</div>--> 
<div class="mostpop" id="mostpop"><p>Menu</p></div> 
<div class="recent" id="recent"><p>Menu</p></div> 
<div class="content" id="content"><p>Content</p></div> 
+0

使用RGBA,而不是http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ – Jrod

+0

您使用IE瀏覽器? –

+0

您無法將子元素的不透明度增加到大於其父元素的值。 – Quantastical

回答

5

透明度初學者應始終從其父繼承。如果你有一個具有50%不透明度的div,然後你將div內的一些內容設置爲50%,那麼最終的內部div將是25%,我不完全確定,但我不認爲它是可能使兒童元素比其父母透明。

如果您只想讓div具有透明背景,則根本不需要使用不透明度,您可以使用background: rgba(255, 255, 255, 0.5);來獲得半透明白色,同時保持前景文本顏色不變。 IE的舊版本也有這樣的解決方法,但它應該適用於ie9。

+0

非常感謝,看起來有點傻,你不能讓一個孩子元素不那麼透明,然後一個元素,但是這個工作非常好! – NRGdallas

+1

它可能看起來很愚蠢,但有充足的理由這樣做。想象一下,你有一個元素有很多孩子或不同的透明度,你想淡出整個元素。目前,您只需將透明度應用於父元素即可。如果這不影響孩子,淡化效果將是一個怪物來處理。 – JerseyMike

1

CSS不透明度有點不可靠 - 一旦你在一個元素上設置了一個特定的不透明度,那個元素的所有子元素都會被迫假設至少有相同的不透明度。你不能用兒童風格覆蓋來解決這個問題。

標準的解決方法是創建兩個元素,並將第二個元素與z-index絕對「置於」第一個元素上。較低的元素可以獲得您的部分透明度,較高的元素可以獲得您的不透明風格。

<div style="position: relative"> 
    <div id="transparency" style="position: absolute; top: 0; left: 0">... transparent stuff here </div> 
    <div id="regular_content" style="position: absolute; top:0;left:0;z-index:1">...</div> 
</div>