CSS透明度越過其他層

Question

我有一個問題...我有我的頭類這樣

.header{ 
    background-color:#626262; 
    width:250px; 
    height:745px; 
    opacity:0.4; 
    filter:alpha(opacity=40); /* For IE8 and earlier */ 
} 

這個類我有這些類裏面...

.logo{ 
    background-color:#626262; 
    opacity:1.0; 
    filter:alpha(opacity=100); /* For IE8 and earlier */ 
    color:#FFF; 
    font-size:28px; 
    padding-top:125px; 
    margin-left:20px; 
} 

.navigation{ 
    background-color:#626262; 
    opacity:1.0; 
    filter:alpha(opacity=100); /* For IE8 and earlier */ 
    color:#FFF; 
    margin-left:20px; 
    text-align:left; 
    margin-bottom: 125px; 
} 

.navigation ul{ 
    list-style:none; 
    padding-left:0; 
    padding-top:35px; 
} 

.navigation ul li{ 
    padding-bottom:20px; 
    font-size:24px; 
} 

.navigation li a{ 
    color:#FFF; 
    text-decoration:none; 
} 

.social{ 
    width:100%; 
    font-size:18px; 
    height: 50px; 
    line-height: 72px; 
    padding-right: 10px; 
} 

.social ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0 0 0 8px; 
} 

.social li { 
    float: left; 
} 

.social ul .facebook a { 
    color: #FFFFFF; 
    display: block; 
    text-decoration: none; 
    background-image: url(http://jamessuske.com/karl/images/facebook.png); 
    background-position: center right; 
    background-repeat: no-repeat; 
    padding-right:65px; 
} 

.social ul .facebook a:hover { 
    background-image: url(http://jamessuske.com/karl/images/facebook_hover.png); 
} 

.social ul .twitter a { 
    color: #FFFFFF; 
    display: block; 
    text-decoration: none; 
    background-image: url(http://jamessuske.com/karl/images/twitter.png); 
    background-position: center right; 
    background-repeat: no-repeat; 
    padding-right:70px; 
} 

.social ul .twitter a:hover { 
    background-image: url(http://jamessuske.com/karl/images/twitter_hover.png); 
} 

.social ul .pinterest a { 
    color: #FFFFFF; 
    display: block; 
    text-decoration: none; 
    background-image: url(http://jamessuske.com/karl/images/pinterest.png); 
    background-position: center right; 
    background-repeat: no-repeat; 
    padding-right:70px; 
} 

.social ul .pinterest a:hover { 
    background-image: url(http://jamessuske.com/karl/images/pinterest_hover.png); 
} 

而那些層被淡化爲0.4的不透明度....我的問題是如何讓這些圖層不被0.4的不透明度褪色？我希望這是有道理的......這樣的一個例子是在http://www.yourthirdeye.ca/

Answer 1

如果它只是一個部分透明的背景下，你可以使用rgba()，像這樣：

.header{ 
    background-color: #626262; 
    background-color: rgba(98, 98, 98, 0.4); 
    width:250px; 
    height:745px; 
} 

這不會工作，舊的瀏覽器（例如IE8和更早的瀏覽器），所以這就是爲什麼background-color設置兩次 - 第一個是後備。

也有一些CSS技巧，你可以使用 - 但它們有缺點。如果上面的解決方案適合你，我會去那。

如果不是，這些鏈接應該讓你開始：

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/