透明的横幅和背景不透明的图像？

-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

透明的横幅和背景不透明的图像？

回答

相关问题