Hình nền CSS ở trên cùng của <img>

Question

Làm cách nào để lặp lại hình nền CSS 1px x 1px này ở đầu HTML <img>?

http://jsfiddle.net/hjv74tdw/1/

Tôi đã xem qua CSS show div background image on top of other contained elements, tuy nhiên nó dường như đòi hỏi một div thêm. Lý tưởng nhất là tôi muốn tôi không phải sử dụng một div ở tất cả, nhưng theo CSS Background-image over HTML img đó là không thực sự có thể, ít nhất là không cho một kịch bản đáp ứng 100% chiều rộng.

.test { 
 
    background: url(http://placehold.it/1/1) repeat; 
 
    position: relative; 
 
    z-index: 100; 
 
    width: 200px; 
 
} 
 
.test img { 
 
    width: 100%; 
 
    display: block; 
 
    position: absolute; 
 
    z-index: 50; 
 
}

<div class="test"> 
 
    <img src="http://lorempixel.com/400/400"> 
 
</div>

Answer 1

Bạn có thể sử dụng một phần tử giả. Trong ví dụ này, phần tử giả :after được đặt hoàn toàn tương đối thành phần tử gốc. Nó lấy kích thước của toàn bộ phần tử cha và kích thước của phần tử gốc được xác định bởi kích thước của phần tử con img.

.test { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.test:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; right: 0; 
 
    bottom: 0; left: 0; 
 
    background: url(http://placehold.it/20x20/1) repeat; 
 
}

<div class="test"> 
 
    <img src="http://lorempixel.com/200/200"> 
 
</div>

Là một mặt lưu ý, ví dụ của bạn đã không được làm việc cho một vài lý do. Phần tử gốc có hình nền, nhưng vì phần tử con thiết lập một hình ảnh stacking contexttrong thành phần gốc, hình nền của bố mẹ không thể xuất hiện ở trên phần tử con img (trừ khi bạn ẩn hoàn toàn phần tử img). Đây là lý do tại sao các z-index s không hoạt động như mong đợi.

Ngoài ra, phần tử img đã được định vị hoàn toàn. Khi làm như vậy, nó được lấy ra khỏi luồng thông thường, và vì nó là phần tử con duy nhất, nên phần tử cha do đó tự sụp đổ và nó không có bất kỳ kích thước nào. Do đó, hình nền không hiển thị. Để giải quyết vấn đề này, bạn sẽ phải đặt kích thước rõ ràng trên phần tử gốc (height/width) hoặc bạn có thể xóa vị trí tuyệt đối trên phần tử con img.

Answer 2

Một cách khác, là để thiết lập content để trống và thiết lập một nền tảng, ví dụ:

img { 
    background: url(...) center center no-repeat; 
    background-size: cover; 
    content: ''; 
    display: block; 
    width: 800px; 
    height: 100px; 
} 

Dưới đây là một bản demo: http://jsfiddle.net/infous/effmea8x/

Trong này giới thiệu những hình ảnh đầu tiên là tiêu chuẩn nhưng với unproportional chiều rộng và cao, thứ hai là nền. Cái đầu tiên được chia tỷ lệ lớn, cái thứ hai là OK.