CSS多个带边距的背景图像答案

【问题标题】：Css multiple background images with marginCSS多个带边距的背景图像
【发布时间】：2012-02-02 04:29:14
【问题描述】：

我正在尝试在一个 div 上使用 2 个背景图像，我为此使用了这些样式

  background:url(../images/bg1.png),url(../images/bg2.png);

但所有图像都像绝对位置，它们是彼此的，所以我使用

  background-position:0px 0px,40px 0px;
  background-repeat:no-repeat,no-repeat;

当我尝试这个 2. 背景消失时，我该如何解决这个问题？

【问题讨论】：

当你说它“消失”时——元素有多宽？我猜超过40px？使用background-image 属性（而不是快捷方式background）设置背景图像可能会解决此问题。
在 jsfiddle 中，这似乎适用于背景或背景图像（无论如何，在 Firefox 和 Safari 中）：jsfiddle.net/SRDks。你在看什么浏览器？
大声笑是的，我的错。这是关于背景图像的大小。谢谢。
@Malixxi 问题是错误的，还是您刚刚修复了它？
bg1 比 40px 宽，我认为不是。当我读到你的评论时，我再看一遍，然后我就看到了我的错误。

【解决方案1】：

正如 cmets 中所讨论的，似乎容器太窄了。它正在“消失”，因为位置比元素宽。

【讨论】：

【解决方案2】：

我可能是错的，但我不知道允许多个背景。

既然我假设你使用的是半透明的 png，为什么不把它们放在 2 个 div 中，然后将一个包裹在另一个里面？

【讨论】：