CSS3: đặt hình nền để rel giá trị thuộc tính

Question

Tôi đang tìm cách đặt background-image (hoặc thậm chí hiển thị hình ảnh qua các phần tử giả :after hoặc :before) với giá trị, sẽ là URL, thuộc tính rel, nhưng chỉ trong một số trường hợp nhất định (đây là danh sách tệp trên đám mây). Ví dụ:

HTML:

<div class="icon ${fileExtension}" rel="${fileURL}"></div> 

Nó sẽ là tuyệt vời nếu tôi có thể làm một cái gì đó như thế này:

CSS:

.icon.png, 
.icon.jpg, 
.icon.jpeg, 
.icon.bmp, 
.icon.gif { background-image: attr(rel,url); } 

... nhưng rõ ràng rằng không làm việc như, nếu tôi không nhầm, hàm attr() CSS chỉ hoạt động bên trong các khối phần tử giả.

Tôi biết có nhiều cách để thực hiện điều này bằng cách sử dụng JSP có điều kiện hoặc thậm chí logic jQuery, nhưng tôi muốn tìm ra cách làm gọn gàng nhờ CSS3, vì tôi chỉ quan tâm đến các trình duyệt hiện đại. .

Ngoài ra, tôi không muốn đặt rõ ràng hình nền cho URL hoặc tạo thành phần <img>, vì theo mặc định nếu tệp không phải là hình ảnh được hỗ trợ, tôi muốn hiển thị một tập hợp các biểu tượng được xác định trước.

Answer 1

tôi đã quyết định đi theo con đường jQuery, và sử dụng một sự kết hợp của @ryanve và @stefanz câu trả lời. Thanks guys

$(document).ready(function() { 
    $(".png,.jpg,.jpeg,.bmp,.gif,.tiff").each(function(n) { 
     var bg = 'url(' + $(this).attr("rel") + ')'; 
     $(this).css('background-image', bg); 
    }); 
}); 

Tôi nghĩ điều này tương đối gọn gàng/súc tích và hoạt động tốt cho nhu cầu của tôi. Hãy bình luận về hiệu quả, phương pháp, vv

Answer 2

Tôi đã cố gắng làm điều gì đó bằng cách sử dụng jQuery nhưng tôi không hiểu chính xác những gì bạn muốn để tôi không thể tiếp tục với mã của mình. Cho đến nay tôi đã thực hiện chỉ này.

EDITED Tôi hy vọng đó là chính xác những gì bạn cần

$(function(){ 
    var terms = new Array('png','jpg','jpeg','bmp','gif'); 

    $('.icon').each(function(){ 
     var t = $(this), 
      rel = t.attr('rel'), 
      cls = t.attr('class'); 

     cls = cls.split(' '); 

     for (var i=0; i < terms.length; i++) { 
      if (terms[i] == cls[1]) { 
       t.css('background-image','url('+rel+')'); 
      } 
     } 
    }); 
}); 

nếu bạn có thể cho tôi một ví dụ tốt hơn, để undestand chính xác những gì bạn muốn, tôi hy vọng ai đó từ đây sẽ có thể giải quyết vấn đề của bạn.

Kính trọng, Stefan

Answer 3

Sử dụng

.icon:after{ content: ""attr(rel)""; } 

hiển thị giá trị rel dưới dạng văn bản.

Một giải pháp jQuery là thêm background-image (lấy từ giá trị rel) như inline CSS:

jQuery(function($) { 
    $('.icon').each(function() { 
     var $this = $(this); 
     $this.css('background-image', 'url(' + $this.attr('rel') + ')'); 
    }); 
});