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

HTML 데이터 속성을 사용하여 CSS 배경 이미지 URL 설정

사용자 정의 사진 갤러리를 만들려면 HTML 구조와 CSS를 신중하게 고려해야 합니다. HTML 데이터 속성을 기반으로 CSS 배경 이미지 URL을 동적으로 결정하기 위해 CSS 변수를 활용할 수 있습니다.

HTML Thumb 형식

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!