IE 7,8中的CSS双背景
IE 7,8中的CSS双背景
提问于 2014-10-16 23:21:45
我有2个背景图像的next 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;
}有可能修复吗？
回答 1
Stack Overflow用户
发布于 2014-10-16 23:24:19
Nether IE7 nor 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;
}这不是巧妙的，我不知道你想要什么样的美学，但你可以用定位来伪装同样的效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26408088
复制相关文章
相似问题
腾讯云开发者
