JavaScript を使用せずに CSS を使用して背景画像を動的に設定するにはどうすればよいですか?

CSS 変数を使用して HTML データ属性から背景画像を動的に割り当てる

質問:

CSS をどのように活用できますか要素の背景画像を、HTML データ属性に格納された値に基づいて、依存せずに自動的に設定します。 JavaScript?

答え:

CSS 変数は、この問題の解決策を提供します。 CSS 変数を使用すると、HTML 要素で定義された値に基づいてスタイルを動的にカスタマイズできます。以下に例を示します:

HTML:

<div class="thumb">

CSS:

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

説明:

HTML コード内のスタイル属性は、 --background という名前の CSS 変数を定義し、それに目的の背景画像の URL を割り当てるために使用されます。 CSS コードでは、background-image プロパティは、その値として --background 変数を参照します。

ページが読み込まれると、ブラウザーは HTML コードと CSS コードの両方を解析します。 HTML で定義された CSS 変数を認識し、その値を .thumb クラスの要素の背景画像プロパティに適用します。

Codepenデモ:

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

注:

CSS 変数は、インターネットエクスプローラー。 IE のサポートが必要な場合は、別のアプローチが必要になる場合があります。

以上がJavaScript を使用せずに CSS を使用して背景画像を動的に設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。