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

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，最后一层可以是颜色。