Question

我有下一个div有2张背景图片，但是在IE 7和8中看不到图像。

 <div class="media" style="background-image: url('/play_video.png'), url('/video.jpg')">
                        <span>Click to play video</span>
                    </div>

.media {    
    background-position: center, center;
    background-repeat: no-repeat;
    width:245px;    
    height:150px;
    cursor:pointer;
    text-align:left;
    position:relative;             
}
    .media span {        
        bottom: 0;
        left: 0;
        color: black;
    }

可以修复吗？

Answer 1

虚空IE7也不支持8多种背景图像。 Source

为了社区，here's a workaround using positioning。

<强> HTML

<div class="media-back">
  <span>Click to play</span>
  <div class="media-play">
  </div>
</div>

<强> CSS

.media-back {
  position:relative;
  height:300px;
  width:300px;
  background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQIbNF1wUNRvdk13BTlt_KZ6HrspnBIpMIOXAkbHsioDTCxMT5r);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
}
.media-play {
  position:relative;
  background-image:url(http://tympanus.net/PausePlay/images/play.png);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  width:15%;
  height:15%;
  margin:0 auto;
  top:50%;
  transform:translateY(-50%);
}
span {
  position:absolute;
  bottom:0;
  left:0;
  cursor:pointer;
}

它不是很好，我也不知道你会选择什么样的美学，但你可以使用定位来伪造相同的效果。

IE 7,8中的CSS双重背景

1 个答案: