一尘不染

使用HTML数据属性设置CSS背景图片网址

css

我计划为朋友建立一个自定义的图片库,我确切地知道我将如何制作HTML,但是CSS遇到了一个小问题。
(如果可能,我希望页面样式不依赖于jQuery)


我的问题是:CSS
Data-Attribute中的HTML
Background-image


我将这种格式用于html缩略图:
<div class="thumb" data-image-src="images/img.jpg"></div>

我认为CSS应该看起来像这样:

.thumb {
    width:150px;
    height:150px;
    background-position:center center;
    overflow:hidden;
    border:1px solid black;

    background-image: attr(data-image-src);/*This is the question piece*/
}

我的目标是把data-image- srcdiv.thumb我的HTML文件,并使用它的每一个div.thumb(或多个)background-image在我的CSS文件来源。


阅读 310

收藏
2020-05-16

共1个答案

一尘不染

您最终将可以使用

background-image: attr(data-image-src url);

但是据我所知,这还没有实现。在上面,url是的可选“类型或单位”参数attr()

2020-05-16