IE 7,8中的CSS双背景[重复]

Question

我有下一个带有 2 个背景图片的 div， 但图像在 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

Nether 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;
}

这不是技巧，我不知道您要追求什么美学，但是您可以使用定位来伪造相同的效果。