Я планирую создать пользовательскую фотогалерею для друга, и я точно знаю, как я буду создавать HTML-код, однако я столкнулся с небольшой проблемой с CSS.
(я бы предпочел не иметь стиль страницы полагается на jQuery, если это возможно)
Мой вопрос касается:
Data-Attribute
в HTML-формате
Background-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