データ属性を使用して CSS 背景画像を動的に設定する方法

HTML データ属性: CSS 背景画像を動的に設定する

目標は、データ属性に基づいて要素の背景画像を動的に設定することですHTML 内、特に .thumb 要素を使用してサムネイルを表示します。

HTML 内この構造では、各サムネイル div には、画像の URL を指定する data-image-src 属性があります:

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

当初は、attr 関数を使用して CSS 背景画像を設定することが期待されていました:

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

しかし、このアプローチはうまくいきませんでした。代替ソリューションとして、CSS 変数 が導入されています。

CSS 変数の使用

CSS 変数を使用すると、変数を宣言して、それをstyle:

<div class="thumb">

上記の HTML では、--background 変数

.thumb {
    background-image: var(--background);
}

CSS では、background-image プロパティが --background 変数を参照するようになりました。これにより、各 .thumb 要素は、対応する data-image-src 属性で指定された URL を背景画像として使用するようになります。

コードペンの例

この動的な例このアプローチは、

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

で見つけることができます。

以上がデータ属性を使用して CSS 背景画像を動的に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。