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

解释：使用background css选项，首先添加图像，而不是背景颜色。

<强> LIVE DEMO

Answer 2

尝试替换

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

使用

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

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