ฉันกำลังพยายามใช้: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 โพสต์ที่ฉันต้องการแก้ไขและฉันสามารถทำได้ในคราวเดียวถ้าฉันสามารถปรับเปลี่ยนสไตล์ชีทได้ แต่ถ้าฉันต้องย้อนกลับไปและเพิ่มspanองค์ประกอบพิเศษระหว่างaและimgองค์ประกอบสิ่งนี้จะทำงานได้มากขึ้น

ขออภัยเบราว์เซอร์ส่วนใหญ่ไม่รองรับการใช้:afterหรือ:beforeบนแท็ก img

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 บริสุทธิ์:

ฉันแค่เนื้อหาปลอม -method

วิธี CSS บริสุทธิ์เพื่อเปิดใช้งาน img: หลังจาก

คุณสามารถตรวจสอบCodePen: ฉันแค่เนื้อหาปลอมหรือดูแหล่งที่มาแหล่งที่มา

ที่มา & ตัวอย่าง

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

รองรับเบราว์เซอร์

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9.8+

✓ Safari

ไม่สนับสนุน

⊗ Internet Explorer 8/9

โปรดทดสอบในเบราว์เซอร์อื่น

เนื่องจากลักษณะของ<img>การเป็นองค์ประกอบที่ถูกแทนที่การจัดรูปแบบเอกสารจะไม่ส่งผลกระทบต่อมัน

หากต้องการอ้างอิงต่อไป<picture>ให้เตรียม wrapper เนทีฟในอุดมคติที่สามารถแนบองค์ประกอบหลอกไปได้เช่น:

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>

นี่เป็นอีกวิธีการหนึ่งที่ใช้ div container สำหรับ img ขณะใช้: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;
} 

หากต้องการดูการทำงานลองดูซอที่ฉันสร้างขึ้น เพียงแค่คุณรู้ว่านี่เป็นเบราว์เซอร์ที่ใช้งานง่ายและไม่จำเป็นต้องหลอกรหัสด้วย 'เนื้อหาปลอม'

ฉันคิดว่าวิธีที่ดีที่สุดในการดูว่าทำไมสิ่งนี้ถึงไม่ได้ผลคือ: ก่อนและ: หลังจากแทรกเนื้อหาก่อนหรือหลังเนื้อหาภายในแท็กที่คุณใช้ ดังนั้นจึงใช้งานได้กับ divs หรือ spans (หรือแท็กอื่น ๆ ส่วนใหญ่) เพราะคุณสามารถใส่เนื้อหาไว้ในนั้นได้

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

อย่างไรก็ตาม img เป็นแท็กปิดตัวเองในตัวเองและเนื่องจากไม่มีแท็กปิดแยกต่างหากคุณจึงไม่สามารถวางอะไรไว้ข้างในได้ (นั่นจะต้องมีลักษณะเหมือน<img>Content</img>แต่แน่นอนว่าไม่ได้ผล)

ฉันรู้ว่านี่เป็นหัวข้อเก่า แต่ปรากฏขึ้นครั้งแรกบน Google ดังนั้นหวังว่าสิ่งนี้จะช่วยให้ผู้อื่นเรียนรู้

อันนี้ใช้ได้สำหรับฉัน:

HTML

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

CSS

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

องค์ประกอบแบบหลอกที่สร้างขึ้นโดย :: before และ :: after จะอยู่ในกล่องการจัดรูปแบบขององค์ประกอบและดังนั้นจึงไม่สามารถนำไปใช้กับองค์ประกอบที่ถูกแทนที่เช่น img หรือองค์ประกอบ br

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

::after อาจใช้เพื่อแสดงรูปภาพทางเลือกของรูปภาพ

ดูตัวอย่างด้านล่าง 2 imgแท็กแรกจะชี้ไปที่ URL ที่เสีย แต่ภาพที่สองแสดงรูปภาพทางเลือกแทนโลโก้ที่เสียหายเริ่มต้นจากเบราว์เซอร์ อย่างไรก็ตามฉันไม่แน่ใจว่ามันใช้งานได้จริงฉันคิดว่ามันเป็นเรื่องยุ่งยากที่จะทำให้มันทำงานได้ถูกต้อง

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

ลองรหัสนี้

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

ฉันลองและพบวิธีที่ง่ายกว่าในการทำเช่นนั้น นี่คือ HTML:

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

สิ่งที่ฉันทำคือวาง<p>แท็กเปล่าหลังจากแท็กรูปภาพ ตอนนี้ฉันจะใช้ p :: ก่อนที่จะแสดงภาพและจัดตำแหน่งตามความต้องการของฉัน นี่คือ 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');
}

ลองมัน.

ลอง:: หลังจากในองค์ประกอบก่อนหน้า