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

Question

Я хочу установить 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>, потому что по умолчанию, если файл не является поддерживаемым изображением, я бы предпочел отобразить заранее определенный набор значков.

Answer 1

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

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

Answer 2

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

отредактировано Надеюсь, это именно то, что вам нужно

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

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

С уважением, Stefan

Answer 3

Я решил пойти по пути 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);
    });
});

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