我计划为朋友建立一个自定义照片库,我确切知道我将如何制作HTML,但是我遇到了一个CSS的小问题。 (如果可能的话,我宁愿没有页面样式依赖于jQuery)
Data-Attribute
in HTMLBackground-image
in CSS
<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
from the div.thumb
in my HTML file and use it for each div.thumb
(s) background-image
source in my CSS file.
这是一个Codepen Pen,以获得我正在寻找的动态示例: http://codepen.io/thestevekelzer/pen/rEDJv
你最终将能够使用
background-image: attr(data-image-src url);
但据我所知,这还没有在任何地方实施。在上面,url
是attr()
的可选“类型或单位”参数。见https://drafts.csswg.org/css-values/#attr-notation。
将内容与风格混淆不是最佳实践,但解决方案可能是
<div class="thumb" style="background-image: url('images/img.jpg')"></div>
你需要一点JavaScript:
var list = document.getElementsByClassName('thumb');
for (var i = 0; i < list.length; i++) {
var src = list[i].getAttribute('data-image-src');
list[i].style.backgroundImage="url('" + src + "')";
}
将<script>
标签包裹在</body>
标签之前的底部,或者包装在页面加载后调用的函数中。
HTML
<div class="thumb" data-image-src="img/image.png">
jQuery的
$( ".thumb" ).each(function() {
var attr = $(this).attr('data-image-src');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).css('background', 'url('+attr+')');
}
});
在JSFiddle上演示
您也可以使用JavaScript执行此操作。
使用一些Sass怎么样?这是我为实现这样的目标所做的工作(尽管请注意,您必须为每个数据属性创建一个Sass列表)。
/*
Iterate over list and use "data-social" to put in the appropriate background-image.
*/
$social: "fb", "twitter", "youtube";
@each $i in $social {
[data-social="#{$i}"] {
background: url('#{$image-path}/icons/#{$i}.svg') no-repeat 0 0;
background-size: cover; // Only seems to work if placed below background property
}
}
实质上,您列出了所有数据属性值。然后使用Sass @each迭代并选择HTML中的所有数据属性。然后,引入迭代器变量并使其与文件名匹配。
无论如何,正如我所说,你必须列出所有值,然后确保你的文件名包含列表中的值。
如果你想用HTML和CSS保存它,你可以使用CSS变量。请记住,css variables aren't supported in IE。
<div class="thumb" style="--background: url('images/img.jpg')"></div>
.thumb {
background-image: var(--background);
}
HTML代码
<div id="borderLoader" data-height="230px" data-color="lightgrey" data-
width="230px" data-image="https://fiverr- res.cloudinary.com/t_profile_thumb,q_auto,f_auto/attachments/profile/photo/a54f24b2ab6f377ea269863cbf556c12-619447411516923848661/913d6cc9-3d3c-4884-ac6e-4c2d58ee4d6a.jpg">
</div>
JS代码
var dataValue, dataSet,key;
dataValue = document.getElementById('borderLoader');
//data set contains all the dataset that you are to style the shape;
dataSet ={
"height":dataValue.dataset.height,
"width":dataValue.dataset.width,
"color":dataValue.dataset.color,
"imageBg":dataValue.dataset.image
};
dataValue.style.height = dataSet.height;
dataValue.style.width = dataSet.width;
dataValue.style.background = "#f3f3f3 url("+dataSet.imageBg+") no-repeat
center";
对于那些想要像我这样愚蠢的答案的人
像1,2,3这样的步骤
这就是我所做的
首先创建HTML标记
<div class="thumb" data-image-src="images/img.jpg"></div>
然后在结束body标记之前添加此脚本
我在下面的代码中包含了结尾主体作为示例
复制时要小心
<script>
var list = document.getElementsByClassName('thumb');
for (var i = 0; i < list.length; i++) {
var src = list[i].getAttribute('data-image-src');
list[i].style.backgroundImage="url('" + src + "')";
}
</script>
</body>