我试图使用: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元素的图像上，但是如果我将覆盖图类应用于img本身，则不起作用。

我希望得到这个工作，因为这额外的span冒犯了我，但更重要的是，我有大约100篇我想修改的博客帖子，如果我可以修改样式表，我可以一次完成，但是如果我必须返回并在a和img元素之间添加一个额外的span元素，这将是更多的工作。

---

不幸的是，大多数浏览器不支持在img标签:after使用:after或:before 。

http://lildude.co.uk/after-css-property-for-img-tag

但是，您可以使用JavaScript / jQuery来完成您所需的任务。 看看这个小提琴：

http://jsfiddle.net/xixonia/ahnGT/

$(function() {

    $('.target').after('<img src="..." />');

});

编辑 ：

为什么这不被支持，检查coreyward的答案。

---

伪选择器之前和之后不插入HTML元素 - 它们在目标元素的现有内容之前或之后插入文本。 由于图片元素不包含文字或有后代，因此img:before或img:after都不会对您有任何好处。 出于同样的原因，这也适用于诸如<br>和<hr>类的元素。

---

我找到了一种在纯CSS中进行这项工作的方法：

我只是假的内容方法

一个纯CSS方法来启用img：after。

你可以看看CodePen：我只是假的内容或看到源代码 。

资源

HTML

<img
    alt="You are watching the ~ I'm just fake content ~ method"  
/>

CSS

img {
    /* hide the default image */
    height:0;
    width:0;

    /* hide fake content */
    font-size:0;
    color:transparent;

    /* enable absolute position for pseudo elements */
    position:relative;

    /* and this is just fake content */
    content:"I'm just fake content";
}

/* initial absolute position */
img:before,
img:after {
    position:absolute;
    top:0;
    left:0;    
}

/* img:before - chrome & others */
img:before {
    content:url(http://placekitten.com/g/250/250);
}

/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
    padding:125px;
    background:url(http://placekitten.com/g/250/250) no-repeat;
}

/* img:after */
img:after {
    /* width of img:before */
    left:250px;

    content:url(http://lorempixel.com/350/200/city/1);
}

浏览器支持

✓Chrome 10+

✓Firefox 11+

✓歌剧9.8+

✓Safari

没有支持

⊗Internet Explorer 8/9

请在其他浏览器中测试

链接地址: http://www.djcxy.com/p/88861.html

上一篇: Does :before not work on img elements?

下一篇: css: how to remove pseudo elements (after, before, ...)