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

Barbara Streisand
リリース: 2024-11-09 17:11:02
オリジナル
167 人が閲覧しました

How to Dynamically Set CSS Background Images Using Data Attributes?

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート