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

Posted 2023-02-21

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

【英文标题】：Can I have two background images and a background color on a CSS element? [duplicate]

【发布时间】：2012-11-10 07:23:37

【问题描述】：

可能重复：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;

有可能吗？

【问题讨论】：

我想您不需要对旧版浏览器的支持？

【参考方案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 */

【参考方案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，最后一层可以是颜色。