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

可能吗？

4

2 回答 2

2

如果您希望同时拥有两张图片并且它们将保持这种状态，那么您可以查看这篇文章，它解释了您需要什么：我可以使用 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 */
}
于 2012-11-21T23:11:13.993 回答
1

这很简单

#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属性由 background-layers 组成，最后一层可以是颜色。

于 2012-11-21T23:12:38.813 回答