Question

我希望将background-image（或甚至通过伪元素:after或:before渲染图像）设置为{的值，该值为{ {1}}属性，但仅限于某些情况（这是云文件列表）。例如：

HTML：

rel

如果我能做到这样的事情会很棒：

CSS：

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

...但显然这不起作用，如果我没有弄错的话，.icon.png, .icon.jpg, .icon.jpeg, .icon.bmp, .icon.gif { background-image: attr(rel,url); } CSS函数只能在伪元素块中运行。

我知道有很多方法可以使用条件JSP甚至jQuery逻辑来实现这一点，但是我想通过CSS3找出一种巧妙的方法，因为我现在只关注现代浏览器。

另外，我不想将背景图像显式设置为URL或创建attr()元素，因为默认情况下如果文件不是支持的图像，我宁愿显示一组预定的的图标。

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

如果你能给我一个更好的例子，准确地说明你想要的东西，我希望这里的人能够解决你的问题。

此致斯蒂芬

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);
    });
});

我认为这是相对简洁的，适合我的需求。随意评论效率，方法等。

CSS3：将背景图像设置为rel属性值

3 个答案: