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

Со временем вы сможете использовать

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

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

Если вы хотите сохранить его с помощью только HTML и CSS, вы можете использовать переменные CSS. Помните, что переменные css не поддерживаются в IE.

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

.thumb {
    background-image: var(--background);
}

Codepen: https://codepen.io/bruce13/pen/bJdoZW

Смешивать контент со стилем - не лучшая практика, но решение может быть

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

Как насчет использования 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 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.

Для тех, кто хочет глупого ответа, как я

Что-то вроде того, как шаги как 1, 2, 3

Вот что я сделал

Сначала создайте разметку HTML

<div class="thumb" data-image-src="images/img.jpg"></div>

Затем перед конечным тегом тела добавьте этот скрипт

Я включил конечное тело в код ниже в качестве примера

Так что будьте осторожны, когда копируете

<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>

КОД 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";

Вот простой пример с использованием jQuery, мы можем поместить изображения в фоновый режим.

$('*[data-background-image]').each(function() {
    $(this).css({
        'background-image': 'url(' + $(this).data('background-image') + ')'
    });
});

div{
  height:200px;
  width:100% ;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div data-background-image="https://via.placeholder.com/500"> </div>