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>

CSS だけでこのようなことを行うことは何とか可能でしょうか?

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

もちろん、このコードは機能していません。

4

2 に答える 2

13

これは、「非動的」な方法で行わない限り、純粋な css では不可能です。

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

サーバー側でファイル名からそのスタイルシートを動的に作成できるかもしれません。

もう 1 つの (おそらくより簡単な) 可能性は、JavaScript を使用してこれを行うことです。

于 2012-06-20T10:52:48.493 に答える