데이터 속성을 사용하여 CSS 배경 이미지를 동적으로 설정하는 방법은 무엇입니까?

HTML 데이터 속성: CSS 배경 이미지를 동적으로 설정

목표는 데이터 속성을 기반으로 요소의 배경 이미지를 동적으로 설정하는 것입니다. HTML에서는 특히 .thumb 요소를 사용하여 썸네일을 표시합니다.

HTML 구조에서 각 썸네일 div에는 이미지의 URL을 지정하는 data-image-src 속성:

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

처음에는 attr 함수를 사용하여 CSS 배경 이미지를 설정하려고 했습니다.

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

그러나, 이 접근 방식은 작동하지 않았습니다. 대안으로 CSS 변수가 도입되었습니다.

CSS 변수 사용

CSS 변수를 사용하면 변수를 선언하고 프로젝트에서 사용할 수 있습니다. 스타일:

<div class="thumb">

위 HTML에서 --Background 변수는 스타일을 사용하여 설정됩니다.

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

CSS에서 background-image 속성은 이제 --Background 변수를 참조합니다. 이렇게 하면 각 .thumb 요소가 해당 data-image-src 속성에 지정된 URL을 배경 이미지로 사용하게 됩니다.

Codepen 예제

이의 동적 예제 접근 방식은 다음에서 찾을 수 있습니다:

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

위 내용은 데이터 속성을 사용하여 CSS 배경 이미지를 동적으로 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!