CSS3: установить фоновое изображение для значения атрибута rel

Я хочу установить background-image (или даже сделать изображение через псевдоэлементы :after или :before) на значение, которое будет URL-адресом, атрибута rel, но только в некоторых случаях (это список файлов облаков). Например:

HTML:

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

Было бы здорово, если бы я мог сделать что-то вроде этого:

CSS

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

... но очевидно, что это не работает, если я не ошибаюсь, функция CSS attr() работает только внутри блоков псевдоэлементов.

Я знаю, что есть способы сделать это, используя условную JSP или даже логику jQuery, но я хотел бы найти аккуратный способ сделать это с помощью CSS3, так как в данный момент меня интересуют только современные браузеры.

Кроме того, я не хочу явно устанавливать фоновое изображение в URL-адрес или создавать элемент <img>, потому что по умолчанию, если файл не поддерживается, я предпочитаю отображать заранее определенный набор значков.

Ответ 1

Я решил пойти по маршруту jQuery и использовал комбинацию ответов @ryanve и @stefanz. Спасибо, ребята

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

Я думаю, что это относительно аккуратно/лаконично и хорошо работает для моих нужд. Не стесняйтесь комментировать эффективность, методологию и т.д.

Ответ 2

Использование

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

отображает значение rel в виде текста.

Решение jQuery состоит в том, чтобы добавить background-image (взятый из значения rel) как встроенный CSS:

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

Ответ 3

Я пытался что-то сделать с помощью jQuery, но я не совсем понимаю, чего вы хотите, поэтому я не могу продолжать использовать свой код. Пока что я сделал только это.

EDITED Я надеюсь, что это именно то, что вам нужно

$(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+')');
            }
        }
    });
});

если вы можете дать мне лучший пример, чтобы узнать, что именно вы хотите, я надеюсь, что кто-то из вас сможет решить вашу проблему.

С уважением, Стефан