Sử dụng thuộc tính dữ liệu HTML để đặt url nền hình ảnh CSS

Question

Tôi dự định xây dựng một thư viện ảnh tùy chỉnh cho một người bạn và tôi biết chính xác cách tôi sẽ sản xuất HTML, tuy nhiên tôi đang gặp phải vấn đề nhỏ với CSS.
(Tôi muốn không có phong cách trang dựa trên jQuery nếu có thể)

---

Câu hỏi của tôi liên quan:
Data-Attribute trong HTML
Background-image trong CSS

---

Tôi đang sử dụng định dạng này cho hình thu nhỏ html của tôi:
<div class="thumb" data-image-src="images/img.jpg"></div>

và tôi giả CSS nên tìm một cái gì đó như thế này:

.thumb { 
    width:150px; 
    height:150px; 
    background-position:center center; 
    overflow:hidden; 
    border:1px solid black; 

    background-image: attr(data-image-src);/*This is the question piece*/ 
} 

---

Mục tiêu của tôi là để có những data-image-src từ div.thumb trong tập tin HTML của tôi và sử dụng nó cho mỗi div.thumb (s) background-image nguồn trong file CSS của tôi.

Đây là một Pen Codepen để có được một tấm gương năng động của những gì tôi đang tìm kiếm:
http://codepen.io/thestevekelzer/pen/rEDJv

Answer 1

Sau cùng, bạn sẽ có thể sử dụng

background-image: attr(data-image-src url); 

nhưng điều đó không được thực hiện bất cứ nơi nào chưa hiểu biết của tôi. Ở trên, url là thông số "loại hoặc đơn vị" tùy chọn cho attr(). Xem https://drafts.csswg.org/css-values/#attr-notation.

Answer 2

Bạn sẽ cần một chút JavaScript cho rằng:

var list = document.getElementsByClassName('thumb'); 

for (var i = 0; i < list.length; i++) { 
    var src = list[i].getAttribute('data-image-src'); 
    list[i].style.backgroundImage="url('" + src + "')"; 
} 

Bọc rằng trong <script> thẻ ở dưới cùng ngay trước thẻ </body> hoặc bọc trong một hàm mà bạn gọi khi trang được tải.

Answer 3

HTML

<div class="thumb" data-image-src="img/image.png"> 

jQuery

$(".thumb").each(function() { 
    var attr = $(this).attr('data-image-src'); 

    if (typeof attr !== typeof undefined && attr !== false) { 
     $(this).css('background', 'url('+attr+')'); 
    } 

}); 

Demo trên JSFiddle

Bạn có thể làm điều này cũng với JavaScript.

Answer 4

Nó không phải là thực hành tốt nhất để trộn lên nội dung với phong cách, nhưng một giải pháp có thể là

<div class="thumb" style="background-image: url('images/img.jpg')"></div> 

Answer 5

Làm thế nào về việc sử dụng một số Sass? Đây là những gì tôi đã làm để đạt được một cái gì đó như thế này (mặc dù lưu ý rằng bạn phải tạo một danh sách Sass cho mỗi thuộc tính dữ liệu).

/* 
    Iterate over list and use "data-social" to put in the appropriate background-image. 
*/ 
$social: "fb", "twitter", "youtube"; 

@each $i in $social { 
    [data-social="#{$i}"] { 
    background: url('#{$image-path}/icons/#{$i}.svg') no-repeat 0 0; 
    background-size: cover; // Only seems to work if placed below background property 
    } 
} 

Về cơ bản, bạn liệt kê tất cả các giá trị thuộc tính dữ liệu của mình. Sau đó, sử dụng Sass @each để lặp qua và chọn tất cả các thuộc tính dữ liệu trong HTML. Sau đó, đưa vào biến lặp và có nó phù hợp với một tên tập tin.

Dù sao, như tôi đã nói, bạn phải liệt kê tất cả các giá trị, sau đó đảm bảo rằng tên tệp của bạn kết hợp các giá trị trong danh sách của bạn.