8

在此处输入图像描述我在 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;
}
4

4 回答 4

22

您可以使用多背景:

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

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

现场演示

于 2012-11-09T10:26:01.040 回答
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;
}​
于 2012-11-09T10:20:41.260 回答
0

一种方法是使用包装器包装#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>
于 2012-11-09T09:42:21.813 回答
0

尝试更换

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

background: #282d37 url(../images/slogan.png) no-repeat top left;
于 2012-11-09T09:39:55.220 回答