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

- user1278496

Answer 1

您可以使用多重背景：

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

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

演示实例

- Vukašin Manojlović

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

- Glynne McReynolds

---

谢谢你的回复。但是还是不对。我按照你说的做了。我移除了背景图片，看看是否还有纯色背景，结果还是有的。我已经将我的slogan.png图片设置为透明了。 - user1278496

http://jsfiddle.net/BzHTe/ - 这里有一个能够正常工作的范例。显然，因为我没有你的图片，所以它是另一张不同的图片。你确定这个PNG图片是透明的吗？你可以在这里添加这张图片吗？ - Glynne McReynolds

刚刚尝试了你的螺旋图像，它可以正常工作。所以显然我保存得正确。问题肯定出在我的图像上。但是具体是什么问题呢？ - user1278496

我在Photoshop中查看了你的图像，除了顶部和底部有一个渐变到透明的小带之外，它没有任何透明像素。这是你想要的吗？如果图像的其余部分应该是透明的，则不是。 - Glynne McReynolds

为什么在Photoshop中，当我在图像背后添加纯色背景时，该图像会变为我想要的第二张顶部图像（即较暗的图像）？而在Web浏览器中，为什么同样的效果似乎不会发生？我就是不明白。 - user1278496

Answer 3

尝试替换

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

使用

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

- George

---

已经尝试过了，但是没成功 :(。感谢你的帮助。 - user1278496

@user1278496 我唯一的建议是将 #container 的 background-color 设置为背景色，而不是 #main。 - George

这很奇怪，可能你的“slogan.png”确实有透明/半透明像素吗？ - George

Answer 4

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

- phun-ky