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

前端之家收集整理的这篇文章主要介绍了CSS3:将背景图像设置为rel属性值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找设置背景图像(或甚至通过伪元素渲染图像:之前或之前)到一个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>元素,因为默认情况下,如果文件不是支持的图像,我宁愿显示一组预定的图标.

解决方法

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

将rel值显示为文本.

一个jQuery解决方案是将背景图像(从rel值中取出)添加为内联CSS:

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

猜你在找的CSS相关文章