2014-07-07 240 views
-1

好吧,由於某種原因,我的100%不透明的圖像顯示出部分透明並顯示其背後的橫幅和背景圖像。我該如何解決?透明的橫幅和背景不透明的圖像?

這裏是我的樣式表:

#banner{ 
    width:1280px; 
    height:80px; 
    line-height:100px; 
    background-color:#a8a8a8; 
    text-align:center; 
    font-size:40px; 
    color:#00FF00; 
} 

#content{ 
    width:100%; 
    font-family:comic; 
    font-size:14px; 
    padding:10%; 
    margin:auto; 
    margin-top:200px; 
} 

#greeting{ 
    margin-top:-275px; 
    margin-left:640px; 
    font-size:25px; 
} 

#graphic{ 
    margin-left:640px; 
    margin-bottom:-140px; 
} 

#banner{ 
    width:1280px; 
    height:80px; 
    line-height:100px; 
    background-color:#a8a8a8; 
    text-align:center; 
    font-size:40px; 
    color:#00FF00; 
    opacity: 0.5; 
    filter: alpha(opacity=25); 
    margin-top: 20px; 
} 

#background{ 
    margin-bottom:-860px; 
    opacity: 0.4; 
    filter: alpha(opacity=25); 
} 

這裏是我的html:

<!DOCTYPE html> 
<html> 
<head> 
    <link href="style.css" rel="stylesheet" type="text/css" align="center"> 
</head> 

<body>  
    <div id="graphic"> 
     <img src="jmfiller2.png" height="150"> 
    </div>  

    <div id="banner"></div> 

    <div id="greeting"> 
    Hello! Welcome to my portfolio site! 
    </div> 
    <div id="content"></div> 
    <div id="background"> 
     <img src="background5.JPG"> 
    </div> 

</body> 
</html> 

回答

1

設置不透明度在CSS效果一切元素的屬性在元素包含

換句話說,如果您的橫幅div設置爲50%/ 25%不透明度,則其中的所有內容也將爲50%/ 25%不透明。

和一些HTML出現丟失,除非你根本沒有張貼這一切

0

斯科特是正確的,你已經設置了父元素有透明度,這將適用於所有兒童和有絕對當父母CSS設置爲透明度時,您無法做到讓孩子不透明。

我知道兩種的解決方法爲這個:

  1. 使用一個微小的PNG圖像 '模擬' 透明度改爲:

    background:url(path/to/image/semi-transparent-background.png) repeat; 
    
  2. 你可以create the transparent background on a pseudo-element, using :before or :after

根據您需要多少向後兼容性,您可以藉助媒體查詢等選擇其中一個或兩個選項。

0

我改變你的CSS一點點,旗幟不再是透明的:

#content{ 
    width:100%; 
    font-family:comic; 
    font-size:14px; 
    padding:10%; 
    margin:auto; 
    margin-top:200px; 
} 

#greeting{ 
    margin-top:-275px; 
    margin-left:640px; 
    font-size:25px; 
} 

#graphic{ 
    margin-left:640px; 
    margin-bottom:-140px; 
} 

#banner{ 
    width:1280px; 
    height:80px; 
    line-height:100px; 
    background-color:#a8a8a8; 
    text-align:center; 
    font-size:40px; 
    color:#00FF00; 
    margin-top: 20px; 
} 

#background{ 
    margin-bottom:-860px; 
    opacity: 0.4; 
    filter: alpha(opacity=25); 
}