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

Question

我希望设置background-image(或甚至通过伪元素:after或渲染图像:before)到rel属性的值,这将是一个URL ,但仅在某些情况下(这是一个云文件列表).例如:

HTML:

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

如果我可以做这样的事情会很棒:

CSS:

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

...但显然这不起作用,如果我没有弄错,attr()CSS函数只能在伪元素块内部工作.

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

此外,我不想将背景图像显式设置为URL或创建<img>元素,因为默认情况下,如果文件不是受支持的图像,我宁愿显示一组预定的图标.

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

我认为这相对简洁/简洁，并且很适合我的需求。请随意评论效率、方法等。