Deniyorum kullanmak :before seçici yerde bir resmin üzerine başka bir resim, ama ben bulmak o sadece işe yaramaz bir yere bir resim önce bir img eleman, sadece başka bir öğe. Özellikle, benim stilleri vardır:

.container
{
   position: relative;
   display: block;
}

.overlay:before
{
    content: url(images/[someimage].png);
    position: absolute;
    left:-20px;
    top: -20px;
}

ve bu gayet iyi çalışıyor:

<a href="[url]" class="container">
  <span class="overlay"/>
  <img width="200" src="[url]"/>
</a>

ama bu değil:

<a href="[url]" class="container">
  <img width="200" src="[url]" class="overlay"/>
</a>

Ben kullanım div p element yerine span ve tarayıcı doğru bindirmeleri benim görüntü içinde görüntü img öğesi, ama eğer ben uygulamak kaplama sınıfı img kendisi, işe yaramıyor.

İsterim ki, bu çalışma nedeniyle ekstra span rahatsız ediyor beni, ama daha da önemlisi, bende yaklaşık 100 blog bunu istiyorum değiştirmek, ve ben bunu tek seferde ben önce değiştir stil, ama eğer geri dönmek zorundayım ve bir eklenti ekstra span öğe arasındaki a img elemanları, bu çok daha fazla iş.

Ne yazık ki, çoğu tarayıcı ımg etiketleri üzerinde :after :before kullanarak desteklemez.

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

Ancak,/jQuery JavaScript ile yapmak mümkündür. Bu keman atın:

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

$(function() {

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

});