Tôi đang cố gắng sử dụng :beforebộ chọn để đặt một hình ảnh lên một hình ảnh khác, nhưng tôi thấy rằng đơn giản là nó không hoạt động để đặt một hình ảnh trước một imgyếu tố, chỉ một số yếu tố khác. Cụ thể, phong cách của tôi là:

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

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

và tôi thấy rằng điều này hoạt động tốt:

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

nhưng điều này không:

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

Tôi có thể sử dụng một divhoặc một pphần tử thay vì đó spanvà trình duyệt che phủ chính xác hình ảnh của tôi trên hình ảnh trong thành imgphần đó, nhưng nếu tôi áp dụng lớp phủ cho imgchính nó, nó không hoạt động.

Tôi muốn làm việc này vì điều đó làm spantôi khó chịu, nhưng quan trọng hơn, tôi đã có khoảng 100 bài đăng trên blog mà tôi muốn sửa đổi và tôi có thể làm điều này trong một lần nếu tôi có thể sửa đổi biểu định kiểu, nhưng nếu tôi phải quay lại và thêm một spanyếu tố phụ ở giữa avà imgcác yếu tố, đây sẽ là công việc nhiều hơn nữa.

Thật không may, hầu hết các trình duyệt không hỗ trợ sử dụng :afterhoặc :beforetrên các thẻ img.

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

Tuy nhiên, bạn có thể thực hiện những gì bạn cần với JavaScript / jQuery. Kiểm tra câu đố này:

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

$(function() {

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

});

Chỉnh sửa :

Để biết lý do tại sao điều này không được hỗ trợ, hãy xem câu trả lời của coreyward .

Các bộ chọn giả trước và sau không chèn các phần tử HTML - chúng chèn văn bản trước hoặc sau nội dung hiện có của phần tử được nhắm mục tiêu. Bởi vì các yếu tố hình ảnh không chứa văn bản hoặc có con cháu, không img:beforehay img:aftersẽ làm bạn bất kỳ tốt. Đây cũng là trường hợp cho các yếu tố như <br>và <hr>cho cùng một lý do.

Tôi tìm thấy một cách để làm cho công việc này trong css thuần túy:

Các Tôi chỉ là giả mạo nội dung -method

một phương thức CSS thuần để kích hoạt img: after.

Bạn có thể kiểm tra CodePen: Tôi chỉ là nội dung giả mạo hoặc xem nguồn .

Nguồn & Đoạn

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

Hỗ trợ trình duyệt

✓ Chrome 10+

✓ Firefox 11+

✓ Opera 9,8+

✓ Safari

Không có hỗ trợ

Explorer Internet Explorer 8/9

Vui lòng kiểm tra trong các trình duyệt khác

Do bản chất <img>là một yếu tố thay thế , kiểu dáng tài liệu không ảnh hưởng đến nó.

Dù sao, để tham chiếu nó, <picture>cung cấp một trình bao bọc lý tưởng, có thể có các phần tử giả gắn liền với nó, như vậy:

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>

Đây là một giải pháp khác sử dụng bộ chứa div cho img trong khi sử dụng :hover::after để đạt được hiệu quả.

HTML như sau:

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

CSS như sau:

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

Để xem nó hoạt động, hãy xem fiddle tôi đã tạo. Để bạn biết đây là trình duyệt thân thiện và không cần phải lừa mã với 'nội dung giả mạo'.

Tôi nghĩ cách tốt nhất để xem tại sao điều này không hiệu quả là: trước và sau khi chèn nội dung của họ trước hoặc sau nội dung trong thẻ bạn đang áp dụng chúng. Vì vậy, nó hoạt động với div hoặc spans (hoặc hầu hết các thẻ khác) bởi vì bạn có thể đặt nội dung bên trong chúng.

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

Tuy nhiên, img là một thẻ khép kín, tự đóng và vì nó không có thẻ đóng riêng biệt, bạn không thể đặt bất cứ thứ gì vào bên trong nó. (Điều đó sẽ cần phải trông giống như<img>Content</img> , nhưng tất nhiên là không hoạt động.)

Tôi biết đây là một chủ đề cũ, nhưng nó xuất hiện đầu tiên trên Google, vì vậy hy vọng điều này sẽ giúp những người khác học hỏi.

Cái này hoạt động với tôi:

html

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

CSS

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

Các phần tử giả được tạo bởi :: trước và :: sau được chứa trong hộp định dạng của phần tử và do đó không áp dụng cho các phần tử được thay thế như img hoặc cho các phần tử br.

https://developer.mozilla.org/en-US/docs/Web/CSS/:: sau đó

::after có thể được sử dụng để hiển thị hình ảnh dự phòng của hình ảnh

Xem ví dụ dưới đây, 2 imgthẻ đầu tiên được trỏ đến các url bị hỏng. Nhưng cái thứ hai hiển thị hình ảnh dự phòng thay vì logo bị hỏng mặc định từ trình duyệt. Tuy nhiên, tôi không chắc đây là điều thực tế, tôi thấy thật khó để làm cho nó hoạt động tốt.

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

Hãy thử mã này

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

Tôi đã thử và tìm thấy một phương pháp đơn giản hơn để làm như vậy. Đây là HTML:

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

Những gì tôi đã làm là đặt một <p>thẻ trống sau thẻ hình ảnh của tôi. Bây giờ tôi sẽ sử dụng p :: trước để hiển thị hình ảnh và định vị nó theo nhu cầu của tôi. Đây là 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');
}

Thử nó.

Hãy thử :: sau trên phần tử trước.