Question

好吧，出于某种原因，我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>

Answer 1

将不透明度设置为CSS效果中的元素属性该元素中包含的所有内容。

换句话说，如果您的横幅div设置为50％/ 25％不透明度，其中的所有内容也将是50％/ 25％不透明。

_{并且某些HTML显示缺失，除非您根本无法全部发布}

Answer 2

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。

根据您需要的向后兼容性，您可以借助媒体查询等选择其中一个或两个选项。

Answer 3

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

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

3 个答案: