Использование HTML data-attribute для установки CSS background-image url
я планирую создать пользовательскую фотогалерею для друга, и я точно знаю, как я собираюсь производить HTML, однако я сталкиваюсь с небольшой проблемой с CSS.
(Я бы предпочел, чтобы стиль страницы не полагался на jQuery, если это возможно)
Мой вопрос касается:
Data-Attribute
в HTMLBackground-image
в CSS
Я использую этот формат для моих эскизов 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-src
С div.thumb
в моем HTML-файле и используйте его для каждого div.thumb
(s) background-image
источник в моем файле CSS.
вот ручка Codepen, чтобы получить динамический пример того, что я ищу:
http://codepen.io/thestevekelzer/pen/rEDJv
6 ответов
вы в конечном итоге сможете использовать
background-image: attr(data-image-src url);
но это еще нигде не реализовано, насколько мне известно. В вышеприведенном,url
является необязательным параметром "type-or-unit" для 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>
tag или wrap в функции, которую вы вызываете после загрузки страницы.
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-КОД
<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";