Используя атрибут данных HTML для установки URL фонового изображения CSS
Я планирую создание пользовательской фотогалереи для друга, и я знаю точно, как я собираюсь быть созданием HTML, однако я сталкиваюсь с маленькой проблемой с CSS.
(Я предпочел бы не иметь моделирование страницы, полагаются на jQuery если возможный),
Мои отношения вопроса:Data-Attribute в HTMLBackground-image в CSS
Я использую этот формат для своих миниатюр HTML:
и я предполагаю, что 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 Pen для получения динамического примера того, что я ищу:
http://codepen.io/thestevekelzer/pen/rEDJv
2 ответа
Если Вы хотели сохранить его только с HTML и CSS, можно использовать Переменные CSS. Следует иметь в виду, , переменные CSS не поддерживаются в IE.
<div class="thumb" style="--background: url('images/img.jpg')"></div>
.thumb {
background-image: var(--background);
}
Для тех, кто хочет немых вниз, отвечают как я
Что-то как то, как к шагам как 1, 2, 3
Здесь это - то, что я сделал
Первый, создает разметку HTML
<div class="thumb" data-image-src="images/img.jpg"></div>
Затем перед Вашим конечным тегом основного текста, добавляет этот сценарий
, я включал конечное тело в код ниже как пример
Так becareful, когда Вы копируете
<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>