Ich versuche, mit dem :beforeSelektor ein Bild über einem anderen Bild zu platzieren, aber ich stelle fest, dass es einfach nicht funktioniert, ein Bild vor einem imgElement zu platzieren, sondern nur vor einem anderen Element. Insbesondere sind meine Stile:

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

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

und ich finde, dass dies gut funktioniert:

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

aber das geht nicht:

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

Ich kann stattdessen ein divoder p-Element verwenden span, und der Browser überlagert mein Bild korrekt mit dem Bild im imgElement. Wenn ich die Overlay-Klasse jedoch auf sich imgselbst anwende , funktioniert dies nicht.

Ich würde das gerne zum Laufen bringen, weil spanmich das zusätzlich beleidigt, aber was noch wichtiger ist, ich habe ungefähr 100 Blog-Beiträge, die ich ändern möchte, und ich kann dies auf einmal tun, wenn ich nur das Stylesheet ändern könnte. aber wenn ich zurück zu gehen und fügen Sie ein zusätzliches spanElement zwischen den aund imgElementen, wird dies viel mehr Arbeit sein.

Leider unterstützen die meisten Browser die Verwendung von :afteroder :beforefür img-Tags nicht.

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

Mit JavaScript / jQuery können Sie jedoch das erreichen, was Sie benötigen. Schauen Sie sich diese Geige an:

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

$(function() {

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

});

Bearbeiten :

Lesen Sie die Antwort von coreyward , um herauszufinden, warum dies nicht unterstützt wird .

Die Vorher- und Nachher-Pseudoselektoren fügen keine HTML-Elemente ein - sie fügen Text vor oder nach dem vorhandenen Inhalt des Zielelements ein. Da Bildelemente enthalten keinen Text oder haben Nachkommen, weder img:beforeoder img:afterwerden Sie etwas Gutes tun. Dies gilt auch für Elemente wie <br>und <hr>aus demselben Grund.

Ich habe einen Weg gefunden, diese Arbeit in reinem CSS zu machen:

Der Ich bin nur gefälschter Inhalt -Methode

eine reine CSS-Methode, um img: after zu aktivieren.

Sie können den CodePen überprüfen : Ich bin nur gefälschter Inhalt oder sehe die Quelle .

Quelle & 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"  
/>

Browser-Unterstützung

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9.8+

✓ Safari

Keine Unterstützung

⊗ Internet Explorer 8/9

Bitte testen Sie in anderen Browsern

Aufgrund der Art <img>, ein ersetztes Element zu sein , hat das Dokument-Styling keinen Einfluss darauf.

Um es trotzdem zu referenzieren, <picture>bietet es einen idealen, nativen Wrapper, an den Pseudoelemente angehängt werden können, wie folgt:

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>

Hier ist eine andere Lösung, bei der ein div-Container für img verwendet wird :hover::after, um den Effekt zu erzielen.

Der HTML wie folgt:

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

Das CSS wie folgt:

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

Schauen Sie sich die Geige an, die ich erstellt habe , um sie in Aktion zu sehen . Nur damit Sie wissen, dass dies browserübergreifend ist und Sie den Code nicht mit "gefälschten Inhalten" austricksen müssen.

Ich denke, der beste Weg, um herauszufinden, warum dies nicht funktioniert, ist folgender: vor und nach dem Einfügen des Inhalts vor oder nach dem Inhalt des Tags, auf das Sie sie anwenden. Es funktioniert also mit Divs oder Spans (oder den meisten anderen Tags), da Sie Inhalte in diese einfügen können.

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

Ein img ist jedoch ein in sich geschlossenes, sich selbst schließendes Tag. Da es kein separates schließendes Tag enthält, können Sie nichts darin einfügen. (Das müsste so aussehen <img>Content</img>, aber das funktioniert natürlich nicht.)

Ich weiß, dass dies ein altes Thema ist, aber es taucht zuerst bei Google auf. Hoffentlich hilft dies anderen beim Lernen.

Dieser funktioniert für mich:

html

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

CSS

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

Die von :: before und :: after generierten Pseudoelemente sind im Formatierungsfeld des Elements enthalten und gelten daher nicht für ersetzte Elemente wie img oder br-Elemente.

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

::after kann verwendet werden, um das Fallback-Bild eines Bildes anzuzeigen

Im folgenden Beispiel zeigen die ersten imgbeiden Tags auf die fehlerhaften URLs. Das zweite zeigt jedoch das Fallback-Bild anstelle des standardmäßig defekten Logos des Browsers an. Ich bin mir jedoch nicht sicher, ob dies praktikabel ist. Ich finde es schwierig, es richtig zum Laufen zu bringen.

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">

Versuchen Sie diesen Code

.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
}

Ich habe versucht, eine einfachere Methode zu finden. Hier ist der HTML:

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

Ich habe ein leeres <p>Tag nach meinem Bild-Tag platziert. Jetzt werde ich p :: before verwenden, um das Bild anzuzeigen und es gemäß meinen Anforderungen zu positionieren. Hier ist das 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');
}

Versuch es.

Versuchen Sie :: after für das vorherige Element.