Использование атрибута данных HTML для установки URL-адреса фонового изображения CSS

Я планирую создать пользовательскую фотогалерею для друга, и я точно знаю, как я буду создавать 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

Ответы

Ответ 1

В конечном итоге вы сможете использовать

background-image: attr(data-image-src url);

но это еще не реализовано до сих пор, насколько мне известно. В приведенном выше примере url является необязательным параметром "тип-единица" для attr(). См. https://drafts.csswg.org/css-values/#attr-notation.

Ответ 2

Не рекомендуется смешивать контент со стилем, но решение может быть

<div class="thumb" style="background-image: url('images/img.jpg')"></div>

Ответ 3

Для этого вам понадобится немного 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> или оберните функцию, которую вы вызываете после загрузки страницы.

Ответ 4

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.

Ответ 5

Как насчет использования некоторых 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. Затем введите переменную итератора и сопоставьте ее с именем файла.

В любом случае, как я уже сказал, вам нужно перечислить все значения, а затем убедитесь, что ваши имена файлов содержат значения в вашем списке.