Html 在 CSS 中的背景颜色之上使用背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13305427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using a background image on top of a background colour in CSS
提问by user1278496
I have designed a webpage in PSD and I am in the middle of converting it. Within my main content I have a solid background colour but I have a glow effect on a separate layer which appears on top of the background colour.
我在 PSD 中设计了一个网页，我正在转换它。在我的主要内容中，我有一个纯色的背景色，但我在一个单独的图层上有一个发光效果，它出现在背景色的顶部。
I have a container that contains all the code, I have a header, main and footer. Within the main, I have added the solid background colour and also added the background image of the glow which I sliced from PSD. However, the solid background colour doesnt appear to show and it just shows the glow effect. Images below show what it looks like and what it should look like:
我有一个包含所有代码的容器，我有一个页眉、主页和页脚。在主体中，我添加了纯色背景色，并添加了我从 PSD 切片的发光背景图像。但是，纯色背景颜色似乎没有显示，它只是显示了发光效果。下面的图片显示了它的外观和它应该是什么样子：
CSS:
CSS：
Html {
background: white;
}
#container {
width: 955px;
height: 900px;
margin: 0px auto 0px auto;
}
#main{
background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;
height: 900px;
width: 955px;
}
回答by Vuka?in Manojlovi?
回答by Glynne McReynolds
The problem is your styles are overriding each other. You need to put the background-colorfirst, and use background-imageinstead of background. Declare all the values in their own properties so the backgroundproperty doesn't override the background-colorone.
问题是您的样式相互覆盖。您需要放置第background-color一个，并使用background-image而不是background. 在它们自己的属性中声明所有值，这样background属性就不会覆盖那个background-color。
#main{
background-color: #282d37;
background-image: url(../images/slogan.png);
background-position: left top;
background-repeat: no-repeat;
height: 900px;
width: 955px;
}?
回答by George
Try replacing
尝试更换
background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;
With
和
background: #282d37 url(../images/slogan.png) no-repeat top left;
回答by phun-ky
A way to do this is wrapping the #main element with a wrapper where you set the background color, then set the opacity matching it (if needed)
一种方法是使用包装器包装 #main 元素，您可以在其中设置背景颜色，然后设置与其匹配的不透明度（如果需要）
#mainwrapper{
background-color: red;
height:100px;
width:100px;
}
#main{
background: url(http://www.w3schools.com/css/klematis.jpg) repeat;
opacity: 0.6;
filter:alpha(opacity=60);
height:100px;
width:100px;
}
<div id="mainwrapper">
<div id="main">
</div>
</div>
