我计划为朋友建立一个自定义照片库,我确切知道我将如何制作HTML,但是我遇到了一个CSS的小问题.
(如果可能的话,我宁愿没有页面样式依赖于jQuery)
Data-Attribute中使用HTMLBackground-image<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文件来源.
这是一个Codepen Pen,以获得我正在寻找的动态示例:http:
//codepen.io/thestevekelzer/pen/rEDJv