:beforeBir görüntüyü başka bir görüntünün üzerine yerleştirmek için seçiciyi kullanmaya çalışıyorum , ancak bir imgöğenin önüne bir görüntü yerleştirmek için işe yaramadığını görüyorum , sadece başka bir öğe. Özellikle, stillerim:

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

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

ve bunun işe yaradığını görüyorum:

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

ama bu yapmaz:

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

Bunun yerine bir divveya pöğe kullanabilirim spanve tarayıcı öğemi öğedeki görüntünün üzerine doğru bir şekilde bindirir img, ancak bindirme sınıfını imgkendisine uygularsam işe yaramaz.

Bunu çalışmak istiyorum, çünkü bu ekstra spanbeni rahatsız ediyor, ama daha da önemlisi, değiştirmek istediğim yaklaşık 100 blog yayınım var ve stil sayfasını değiştirebilirsem bunu bir seferde yapabilirim, ama geri dönüp ve elemanları spanarasına fazladan bir eleman eklemem gerekirse , bu çok daha fazla iş olacak. aimg

Ne yazık ki, çoğu tarayıcı img etiketlerinin kullanılmasını :afterveya kullanılmasını desteklemez :before.

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

Ancak, JavaScript / jQuery ile ihtiyacınız olanı başarmanız mümkün. Bu kemanı kontrol et:

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

$(function() {

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

});

Düzenle :

Bunun desteklenmemesinin nedeni coreyward'ın cevabına göz atın .

Sahte seçicilerden önce ve sonra HTML öğeleri eklemezler - hedeflenen öğenin mevcut içeriğinden önce veya sonra metin eklerler. Görüntü elemanları metin içeren veya torunları var, ne yapmadığından img:beforeya img:aftersize hiçbir işe olacaktır. Bu aynı zamanda, benzer elemanlar için geçerlidir <br>ve <hr>aynı sebepten.

Bu işi saf css'de yapmanın bir yolunu buldum:

Sadece sahte içerik olduğum kullanılan yöntem

img: after özelliğini etkinleştirmek için saf bir CSS yöntemi.

CodePen kontrol edebilirsiniz : Ben sadece sahte içerik veya kaynak görmek .

Kaynak ve Snippet

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);
}

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

Tarayıcı desteği

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9.8+

✓ Safari

Destek yok

⊗ Internet Explorer 8/9

Lütfen diğer tarayıcılarda test edin

Değiştirilen bir öğe<img> olmasının doğası gereği , belge stili onu etkilemez.

Yine de referans vermek için, <picture> sözde elemanlara bağlı olabilen ideal, yerel bir sarmalayıcı sağlar, şöyle:

img:after, picture:after{
    content:"\1F63B";
    font-size:larger;
    margin:-1em;
}

<img src="//placekitten.com/110/80">

<picture>
    <img src="//placekitten.com/110/80">
</picture>

İşte :hover::afterefekti elde etmek için kullanırken img için bir div konteyner kullanan başka bir çözüm .

HTML aşağıdaki gibi:

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>

CSS aşağıdaki gibidir:

#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;
} 

Eylem halinde görmek için oluşturduğum kemanı kontrol edin . Bunun çapraz tarayıcı dostu olduğunu ve kodu 'sahte içerik' ile kandırmaya gerek olmadığını bilmeniz yeterlidir.

Bunun neden işe yaramadığına bakmanın en iyi yolunun şudur: önce ve: içeriğini, uyguladığınız etiketin içindeki içerikten önce veya sonra ekleyin. Bu nedenle, div içine veya açıklığa (veya diğer etiketlerin çoğuna) çalışır, çünkü içeriğine içerik koyabilirsiniz.

<div>
:before
Content
:after
</div>

Bununla birlikte, bir img bağımsız, kendiliğinden kapanan bir etikettir ve ayrı bir kapanış etiketi olmadığından, içine hiçbir şey koyamazsınız. (Bunun gibi görünmesi gerekir <img>Content</img>, ancak elbette bu işe yaramaz.)

Bunun eski bir konu olduğunu biliyorum, ancak önce Google'da ortaya çıkıyor, umarım bu başkalarının öğrenmesine yardımcı olacaktır.

Bu benim için çalışıyor:

html

<ul>
    <li> name here </li>
</ul>

CSS

ul li::before {
    content: url(../images/check.png);
}

:: before ve :: after tarafından oluşturulan sözde elemanlar elemanın biçimlendirme kutusu tarafından kapsanır ve bu nedenle img veya br elemanları gibi değiştirilmiş elemanlar için geçerli değildir.

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

::after olabilir için kullanılabilir görüntülemek yedek resim , bir görüntünün

Aşağıdaki örneğe bakın, ilk 2 imgetiket bozuk URL'leri gösterir. Ancak ikincisi, tarayıcıdaki varsayılan kırık logo yerine yedek resmi görüntüler. Ancak, bunun herhangi bir pratik olduğundan emin değilim, doğru çalışması için biraz zor buluyorum.

img {
  position: relative;
  display: inline-block;
  width: 300px;
  height: 200px;
  vertical-align: top;
}
img:not(:first-child)::after {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  content: "<" attr(alt) "> NOT FOUND";
  border: 1px dashed #999;
  background: url(https://cdn.dribbble.com/users/1012566/screenshots/4187820/topic-2.jpg) center/100%;
}

<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100/75" alt="logo">
<img src="https://source.unsplash.com/random/100x75" alt="logo">

Bu kodu deneyin

.button:after {
    content: ""
    position: absolute
    width: 70px
    background-image: url('../../images/frontapp/mid-icon.svg')
    display: inline-block
    background-size: contain
    background-repeat: no-repeat
    right: 0
    bottom: 0
}

Denedim ve bunu yapmak için daha basit bir yöntem buldum. İşte HTML:

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

<p>Yaptığım resim etiketimin arkasına boş bir etiket yerleştirmekti . Şimdi görüntüyü göstermek ve ihtiyaçlarıma göre konumlandırmak için önce p :: kullanacağım. İşte CSS:

#empty_para
{
    display:inline;
    font-size:40;
    background:orange;
    border:2px solid red;
    position:relative;
    top:-400px;
    left:100px;
}
#empty_para::before
{
    content: url('messages.png');
}

Dene.

Önceki öğeden sonra :: öğesini deneyin .