我计划为朋友建立一个自定义的图片库,我确切地知道我将如何制作HTML,但是CSS遇到了一个小问题。 (如果可能,我希望页面样式不依赖于jQuery)
我的问题是:CSS Data-Attribute中的HTML Background-image
Data-Attribute
Background-image
我将这种格式用于html缩略图: <div class="thumb" data-image-src="images/img.jpg"></div>
<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- src从div.thumb我的HTML文件,并使用它的每一个div.thumb(或多个)background-image在我的CSS文件来源。
data-image- src
div.thumb
background-image
您最终将可以使用
background-image: attr(data-image-src url);
但是据我所知,这还没有实现。在上面,url是的可选“类型或单位”参数attr()。
url
attr()