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

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

カスタム フォト ギャラリーを作成するには、HTML 構造と CSS を慎重に検討する必要があります。 HTML データ属性に基づいて CSS 背景画像 URL を動的に決定するには、CSS 変数を利用できます。

HTML Thumb Format

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

CSS CSS 変数を使用する

.thumb {
    --background: url(attr(data-image-src)); /* Store URL in CSS variable */
    
    background-image: var(--background); /* Use CSS variable for background image */
}

このアプローチでは、div.thumb の data-image-src が CSS 変数に保存されます。その後、background-image プロパティは CSS 変数を参照して、背景画像の URL を動的に設定します。

ブラウザのサポート
CSS 変数は Internet Explorer ではサポートされていないため、別のアプローチが必要です。 IE との互換性を確保するには、CSS プリプロセッサまたは JavaScript を使用するソリューションをお勧めします。

コード例

<div class="thumb">

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

この手法を示す CodePen の例は、ここにあります。 : https://codepen.io/bruce13/pen/bJdoZW

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