Question

这是我第一次在这里发帖。我有个问题。我已经尝试了很长时间才能在Chrome / Safari和IE中使用多个背景图像。当然它适用于IE以外的所有浏览器。

这是我的代码：

#container {
  width: 828px;
  margin: auto;
  padding: 0;
  text-align: left;
  position: relative;
  overflow: visible;
  background-image: url('images/body.png'), url('images/filler.png');
  background-repeat: no-repeat, repeat-y;
}

我使用两个背景图像的原因是因为我希望图示的部分保持在顶部，并且当添加更多内容时，在相同的div层中重复白页背景。

目前此代码在Chrome中运行良好，但背景图片中的任何一个都显示在Internet Explorer中。

帮助？

Answer 1

如果可能，我建议您使用两个容器元素。

HTML

<div id="container">
  <div id="inner-container">
  </div>
</div>

CSS

#container {
  background: url('images/filler.png') repeat-y;
}
#inner-container {
  background: transparent url('images/body.png') no-repeat left top;
}

IE中的多个背景图像，使用CSS在IE中创建多个背景图像

1 个答案: