我试图使用:before选择器将图像放在另一个图像上，但我发现它根本不能将图像放在img元素之前，只有一些其他元素。具体来说，我的风格是:
.container
{
position: relative;
display: block;
}
.overlay:before
{
content: url(images/[someimage].png);
position: absolute;
left:-20px;
top: -20px;
}
我发现这很有效:
<a href="[url]" class="container">
<span class="overlay"/>
<img width="200" src="[url]"/>
</a>
但这不是:
<a href="[url]" class="container">
<img width="200" src="[url]" class="overlay"/>
</a>
我可以使用div或p元素来代替这个span，浏览器会正确地将我的图像覆盖到img元素中的图像上，但如果我将overlay类应用到img本身，它就不起作用了。
我想让它工作，因为这个额外的span冒犯了我，但更重要的是，我有大约100篇博客文章，我想修改，如果我可以修改样式表，我可以一次完成这一点，但如果我必须返回并在a和img元素之间添加一个额外的span元素，这将是更多的工作。
下面是另一个img使用div容器的解决方案，同时使用:hover::after来达到效果。
HTML如下:
<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>
CSS如下:
#img_container {
margin:0;
position:relative;
}
#img_container:hover::after {
content:'';
display:block;
position:absolute;
width:300px;
height:300px;
background:url('');
z-index:1;
top:0;
}
要查看它的操作，请检查我创建的小提琴。只是为了让你知道这是跨浏览器友好的，没有必要用“假内容”欺骗代码。
下面是另一个img使用div容器的解决方案，同时使用:hover::after来达到效果。
HTML如下:
<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>
CSS如下:
#img_container {
margin:0;
position:relative;
}
#img_container:hover::after {
content:'';
display:block;
position:absolute;
width:300px;
height:300px;
background:url('');
z-index:1;
top:0;
}
要查看它的操作，请检查我创建的小提琴。只是为了让你知道这是跨浏览器友好的，没有必要用“假内容”欺骗代码。
