Вопрос по css3, css, custom-data-attribute – Как я могу использовать атрибут данных, чтобы установить фоновое изображение в CSS?

13

У меня есть папка с несколькими фоновыми изображениями (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>

Будет ли это возможно как-тоjust with CSS сделать что-то подобное?

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

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

Моей целью было получить его с помощью CSS Enrique Moreno Tent
Вы & APOS; повторноsupposed чтобы иметь возможность сделать это сthe CSS3-enhanced version of attr() (за исключением того, что вам нужно заключить строки в кавычки), но нет известных реализаций. Ваш единственный способ - жестко закодировать их, как предлагает oezi. BoltClock♦
не с чистым CSS, а с JavaScript - это вариант для вас? oezi

Ваш Ответ

2   ответа
0

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

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

Это не будет возможно с чистым CSS, если вы не сделаете это «нединамичным»; путь:

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

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

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

Отстой :( Спасибо. Я мог бы использовать SASS, но не мое предпочтительное решение. Enrique Moreno Tent

Похожие вопросы