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

CSS カスタム プロパティを使用した背景画像の設定

コード内の多くの要素は次のパターンに従います:

背景画像を設定することを目的としています純粋な CSS を使用して、これらの要素を data-image 属性に格納されている値に変換します。

前の試行

これを達成するために次の CSS コードを使用しようとしました:

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

境界線は正しく表示されましたが、背景画像は影響を受けませんでした。

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

データ属性を使用する代わりに実行可能な方法は、CSS カスタム プロパティを使用することです。値は文字列に限定されないため、任意の有効な型を割り当てることができます。

さらに、カスタム プロパティを使用すると、スタイルシートのスワップを通じて値を動的に更新できます。

カスタム プロパティの使用方法は次のとおりです。背景画像を設定するには:

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

<div>

この例では、 --bg-image プロパティがスタイルシートで定義され、画像に割り当てられます。 URL。 div 要素の style 属性は、インライン スタイルを使用して --bg-image の値を設定します。これにより、スタイルシートを変更せずに、個々の要素の背景画像を指定できます。

カスタム プロパティを活用することで、データ属性を通じて背景画像を設定する際の柔軟性と保守性が向上します。

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