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

データ属性を使用して CSS で要素の外観をカスタマイズする

Web 開発の領域では、要素の外観を制御する方法が多数あります。 CSS を使用して Web ページ上の要素を作成します。一般的なアプローチの 1 つは、要素の背景画像を指定することです。ただし、動的に生成された HTML を使用する場合、画像ソースの URL を取得するのが困難になります。

次の HTML 構造を考えてみましょう:

<div class="thumb" data-image-src="images/img.jpg"></div>

私たちの目標は、data-image-src を活用することです。 HTML 内の属性を使用して、CSS の各 .thumb 要素の背景画像 URL を設定します。

.thumb {
    width: 150px;
    height: 150px;
    background-position: center center;
    overflow: hidden;
    border: 1px solid black;

    /* The key issue: How to use the data-image-src attribute to set the background image? */
    background-image: attr(data-image-src);
}

意図した構文は正しいですが、期待どおりに動作しません。この問題を解決するには、CSS 変数を利用する手法を使用できます。画像ソースの URL を CSS 変数に保存すると、background-image プロパティ内でそれを参照できます。

<div class="thumb">
<pre class="brush:php;toolbar:false">.thumb {
    background-image: var(--background);
}

CSS 変数を利用すると、ブラウザ間の互換性が提供され、この手法が確実に機能します。完全なデータ属性機能をサポートしていないブラウザを含む、さまざまなブラウザでの使用を目的としています。

これで、ブラウザは各ブラウザの背景画像を動的に設定します。 .thumb 要素は、対応する data-image-src 属性で指定された値に基づき、data-attributes を使用して要素の外観を制御する柔軟かつ効率的な方法を提供します。