Question

可能重复：
Multiple background-images and a background-color

我可以有两个背景图片和背景颜色吗？

目前我只有这段代码才能达到预期的效果：

#myelement {
   background: url("http://zbee.me/tz/bottom-right.png") no-repeat right bottom, 
   url("http://zbee.me/tz/top-left.png") no-repeat left top, 
   url("http://zbee.me/tz/bg.png");
}

但我想使用这样的东西：

#myelement {
   background: url("http://zbee.me/tz/bottom-right.png") no-repeat right bottom, 
   url("http://zbee.me/tz/top-left.png") no-repeat left top;
   background-color: #35434E;
}

有可能吗？

Answer 1

如果您希望同时拥有两张图片并且它们会保持原样，那么您可以查看此帖子，它会解释您需要的内容：Can I have multiple background images using CSS?

不幸的是，如果您想单独操作背景，则不能有这样的组合，但是您可以重叠分区，例如每个分区都有自己的背景。

你最好的镜头是在一个师内有两个师，每个师有自己的背景和位置，确保父亲是亲戚，孩子是绝对的：

<div id="wrapper">
  <div id="bg1"></div>
  <div id="bg2"></div>
</div>

CSS：

#wrapper{
 position:relative;
 width:500px;
 height:500px;
 background: /* The bacground color you need */
}

#bg1{
 position:absolute;
 width: 250px;
 height:500px;
 right:0;
 background: /* The bacground you need and position */
}

#bg2{
 position:absolute;
 width: 250px;
 height:500px;
 left:0;
 background: /* The bacground you need and position */
}

Answer 2

就像

一样简单

#myelement {
   background: url("http://zbee.me/tz/bottom-right.png") no-repeat right bottom, 
   url("http://zbee.me/tz/top-left.png") no-repeat left top,
   #35434E;
}

background属性为composed of background-layers，最后一层可以是一种颜色。

我可以在CSS元素上有两个背景图像和背景颜色吗？

2 个答案: