HTML データ属性と CSS 変数を使用して動的な画像の背景を作成するにはどうすればよいですか?

HTML データ属性と CSS を使用した動的画像の背景

問題:

次のように仮定します。カスタム フォト ギャラリーを作成し、HTML のデータ属性を使用して画像を保存しますURL。これらの URL を、サムネイルを表す div 要素の background-image プロパティに割り当てたいとします。

HTML コード:

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

CSS コード (問題のある部分) ):

.thumb {
    background-image: attr(data-image-src);
}

目的は、各サム div の data-image-src 値を取得し、CSS ファイル内のその div の背景画像として設定します。

解決策:

CSS 変数を使用すると、 jQuery やブラウザ固有のハックを使用せずにこれを実現できます。 CSS 変数は Internet Explorer ではサポートされていないことに注意してください。

更新された HTML コード:

<div class="thumb">
<p><strong>更新された CSS コード:</strong></p>
<pre class="brush:php;toolbar:false">.thumb {
    background-image: var(--background);
}

コデペンデモ:

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