Question

我想在IE 8中有多个背景图像效果，是否有可能或者有其他方法可以应用于元素。

Answer 1

由于IE8支持:pseudo elements，因此使用:after和:before可以创建多重背景效果。请查看 DEMO 。

<强> HTML 只需要一个div。

<div id="silverback"></div>

<强> CSS

#silverback {
  position: relative;
  height: 150px;
  width:500px;
  background: url("http://lorempixel.com/100/150/") no-repeat;
  top:0;
  left:0;
  right:0;
  zoom:1;
  border:1px solid #ef8913;
}
#silverback:before {
  height:150px;
  width:100px;
  content: " ";
  position:absolute;
  top:0;
  left:110px;
  background: url("http://placehold.it/100x150/") 0 0 no-repeat;
}

#silverback:after {
  height: 150px;
  width:100px;
  content: " ";
  position:absolute;
  top:0;
  left:220px;
 background: url("http://lorempixel.com/100/150/") 0 0 no-repeat;
}

根据评论发布了更新的DEMO。

Updated DEMO

Answer 2

使用重叠DIV并将背景图像应用于它们，IE8不支持此CSS3规则（http://caniuse.com/multibackgrounds）

Answer 3

我们可以使用css属性“background”将背景图像应用于div，这样做我们就完成了一个图像。现在要向div添加另一个背景图像，为div添加一个类。设置类css 与另一个背景图像。

实施例我们有一个div，里面有一个锚标签，我们要在其上应用两个背景图像

现在，如果我们想要将另一个背景图像应用于此相同的锚标记尝试使用

<div><div class="clsAnother"></div><a style="background:url()"></a></div>


In style tag, give style to this class:
class="clsAnother"></div><a {background:url(../../CustomerImages/tick-icon.png) 0 0 no-repeat; }

这会将另一个图像添加到锚点的背景中。注意：您只需要在IE的情况下添加类，因为IE无法理解“background”属性中的多个URL。虽然“background”属性中的多个网址与Mozilla和Chrome配合使用效果很好。

如何在IE8 + GWT中实现多重背景图像效果

3 个答案: