html - 在 CSS 中的背景颜色之上使用背景图像

Question

我在 PSD 中设计了一个网页，并且正在对其进行转换。在我的主要内容中，我有一个纯色的背景颜色，但我在一个单独的图层上有一个发光效果，它出现在背景颜色的顶部。

我有一个包含所有代码的容器，我有一个页眉、主页和页脚。在主体中，我添加了纯色背景颜色，还添加了我从 PSD 切片的发光的背景图像。但是，纯色背景颜色似乎没有显示，它只是显示发光效果。下面的图片显示了它的外观和外观：

---

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

Answer 1

您可以使用多背景：

#main {
  width: 900px;
  height: 955px;
  background: url(../images/slogan.png) no-repeat, #282d37;
}​

说明：使用backgroundcss 选项，先添加图片，而不是背景颜色。

现场演示

Answer 2

问题是您的样式相互覆盖。您需要放置第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;
}​

Answer 3

一种方法是使用包装器包装#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>

Answer 4

尝试更换

background: url(../images/slogan.png) top left no-repeat;
background-color: #282d37;

和

background: #282d37 url(../images/slogan.png) no-repeat top left;