データ属性を使用して CSS で背景画像を効率的に設定するにはどうすればよいですか?

CSS データ画像属性を使用した背景画像の設定

CSS は、要素の背景画像を定義するための背景画像プロパティを提供します。ただし、インライン HTML コードを使用して背景画像を設定するのは面倒な場合があります。これに対処するために、CSS テクニックでは attr() 関数と data-image 属性を使用します。

問題の説明

開発者は要素に背景画像を適用したいと考えています。 data-image 属性に格納されている値に基づきます。彼らは最初に次の CSS コードを試みました:

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

しかし、このコードは背景画像を正しく設定できませんでした。

カスタム プロパティを使用した解決策

attr() と data-image を使用する代わりに、カスタム プロパティ (CSS 変数とも呼ばれる) を使用する代替アプローチもあります。カスタム プロパティを使用すると、柔軟性が高まり、プログラムによる更新が可能になります。

例

カスタム プロパティを使用すると、次のように目的の機能を実現できます。

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}

<div class="kitten"
     >

この例では、カスタム プロパティ --bg-image がインライン スタイル属性を使用して設定され、目的の背景の URL を指定します。 画像。 .kitten クラスはこのカスタム プロパティを参照して、画像を背景として適用します。

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