我查看了你提供的链接,并根据它得到了这个解决方案。
HTML:
<div class="image">
<img src="xy.jpg" alt="" />
<img class="hoverimage" src="xy_hover.jpg" alt="" />
</div>
CSS:
.image { position: relative; width: 184px; height: 219px; }
.hoverimage { position: absolute; top: 0; left: 0; display: none; }
.image:hover .hoverimage { display: block; }
应该适用于所有浏览器,包括IE8和IE7。它在IE6中不起作用,因为它只允许对某些元素(如链接(<a>
))使用:hover。如果要支持IE6,请将.image
更改为<a>
而不是<div>
,并给它display:block;
。
<div class="container"><img src="http://placekitten.com/240/320" alt="icanhaz"></div>
.container {
position: relative;
}
.container:hover:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5); /* Here you may also use images, gradients, etc */
}
请看示例这里
<div style="Background-Image:Url(BackgroundImage.Jpg);Width:500px;Height:500px" >
<div style="Background-Image:Url(OverlayImage.Png);Width:50%;Height:50%" >
...
</div>
</div>
这是我能理解你问题的最接近方式