HTML 데이터 속성과 CSS 변수를 사용하여 동적 이미지 배경을 만드는 방법은 무엇입니까?

HTML 데이터 속성과 CSS를 사용하는 동적 이미지 배경

문제:

사용자 정의 사진 갤러리를 다시 만들고 HTML의 데이터 속성을 사용하여 이미지 URL을 저장합니다. 썸네일을 나타내는 div 요소의 background-image 속성에 이러한 URL을 할당하려고 합니다.

HTML 코드:

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

CSS 코드(의심스러운 부분) ):

.thumb {
    background-image: attr(data-image-src);
}

각 썸 div에서 data-image-src 값을 추출하여 CSS 파일에서 해당 div의 배경 이미지로 설정하는 것이 목표입니다.

해결책:

CSS 변수를 사용하면 jQuery나 브라우저별 해킹 없이 이를 달성할 수 있습니다. Internet Explorer에서는 CSS 변수가 지원되지 않습니다.

업데이트된 HTML 코드:

<div class="thumb">
<p><strong>업데이트된 CSS 코드:</strong></p>
<pre class="brush:php;toolbar:false">.thumb {
    background-image: var(--background);
}

코드펜 데모:

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