透明的橫幅和背景不透明的圖像？

-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>

來源

2014-07-07 Jenny

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

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

_{和一些HTML出現丟失，除非你根本沒有張貼這一切}

來源

2014-07-07 04:01:00 Scott

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

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

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

background:url(path/to/image/semi-transparent-background.png) repeat;

你可以create the transparent background on a pseudo-element, using :before or :after。

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

來源

2014-07-07 04:22:28 Dom

我改變你的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); 
}

來源

2014-07-07 04:33:27

透明的橫幅和背景不透明的圖像？

回答

相關問題