CSS задает фоновое изображение с помощью data-image attr

У меня есть элементы с этим шаблоном:

<div data-image="{imageurl}" ...></div>

Я хочу установить эти элементы background-image в data-image. Я проверяю этот код CSS:

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

показать границу правильно, но ничего не произошло для фона Как я могу исправить этот код только css (не js или jq)?

Ответ 1

С точки зрения написания поддержка браузера attr() нотации браузера по свойствам CSS, отличным от content - like background-image, - очень ограниченный.

Кроме того, согласно спецификации уровня 2 CSS, объединение url() и attr() недействительно:
~~content: url(attr(data-image));~~.

Следовательно, на данный момент нет кросс-браузерного решения CSS для достижения желаемого результата. Если использование JavaScript не является вариантом:

var list = document.querySelectorAll("div[data-image]");

for (var i = 0; i < list.length; i++) {
  var url = list[i].getAttribute('data-image');
  list[i].style.backgroundImage="url('" + url + "')";
}

div[data-image] {
  width: 100px; height: 100px; /* If needed */
  border: 2px solid black;
}

<div data-image="http://placehold.it/100"></div>

Ответ 2

В HTML:

<div data-image="path_to_image/image_file.extension" ... ></div>

В CSS:

div:after {
    background-image : attr(data-image url);
    /* other CSS styling */
}

Проблемы:

Это ваш ответ. Проверьте эту документацию в w3.org. Но главная проблема: она не будет работать, еще нет!. Во многих браузерах attr() выполняется успешно, когда он используется в атрибуте content: для кодирования CSS. Но используя его в других атрибутах CSS, он работает не так, как ожидалось, даже в крупных браузерах.

Решение

Используйте сценарии, такие как JavaScript или jQuery.

Ссылки

Спасибо

Hashem Qolami для исправления моего синтаксиса.:)

Ответ 3

Если целью является установка стиля background-image элемента HTML из HTML-документа, а не определение CSS, почему бы не использовать встроенный атрибут style элемента HTML?

div[style^='background-image'] {
  width:400px;
  height:225px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  /* background-image is not set here... */
}

<!-- ... but here -->
<div style="background-image:url(http://img01.deviantart.net/5e4b/i/2015/112/c/5/mandelbrot_62____courage_to_leave___by_olbaid_st-d646sjv.jpg)"></div>

Ответ 4

Хорошей альтернативой атрибутам data- (или подходу attr() в целом) может быть использование пользовательских свойств (MDN, csswg, CSS-уловок).

поскольку их значения не ограничиваются строками, мы можем передавать любой тип, который разрешен в качестве значения пользовательского свойства!

Кроме того, вы получаете преимущество обновления этих свойств во время выполнения с помощью замены таблицы стилей.

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}

<div  class="kitten"
      style="--bg-image: url('http://placekitten.com/525/252');">
</div>