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

Question

可能的重复项：
多个背景图像和背景色

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

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

#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

如果您希望同时拥有两个图像并且它们将保持原样，那么您可以查看这篇文章，它解释了您的需求： 我可以使用 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属性由背景图层组成，最后一个图层可以是颜色。