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 サイトの他の関連記事を参照してください。