Как я могу использовать атрибут data для установки фонового изображения в CSS?

У меня есть папка с несколькими фоновыми изображениями (one.jpg, two.jpg, three.jpg), и эта разметка

<section class="slide" data-bg="one"></section>
<section class="slide" data-bg="two"></section>
<section class="slide" data-bg="three"></section>

Можно ли как-то просто с CSS сделать что-то вроде этого?

.slide{
    background-image: url(img/attr(data-bg).jpg);
}

Этот код не работает, конечно.

Ответ 1

Это будет невозможно с чистым css, если вы не сделаете это "нединамичным" способом:

.slide[data-bg="one"]{
  background-image: url('img/one.jpg');
}
.slide[data-bg="two"]{
  background-image: url('img/two.jpg');
}
...

Возможно, вы можете динамически создавать эту таблицу стилей из ваших имен файлов на стороне сервера.

Другая (скорее всего, более простая) возможность заключается в том, чтобы сделать это с помощью JavaScript - но поскольку вы исключили, что я предполагаю, что вы знаете об этом и просто не хотите его использовать.

Ответ 2

Я знаю, что исходный вопрос подчеркивал это с помощью только CSS, но я дошел до этого вопроса, потому что другой вопрос (который не обязательно требовал решения CSS) был отмечен как дубликат этого. Вот то, что я использую в качестве решения, в случае, если это помогает кому-то еще, и использует javascript w/jQuery:

$('.slide').each(function (index) {
    var slide = $(this);
    slide.css('background-image', 'url(' + slide.data('bg') + ')');
});