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

CSS로 요소 모양을 사용자 정의하기 위해 데이터 속성 사용

웹 개발 영역에는 요소 모양을 제어하는 ​​다양한 방법이 있습니다. CSS를 사용하여 웹 페이지의 요소. 일반적인 접근 방식 중 하나는 요소의 배경 이미지를 지정하는 것입니다. 그러나 동적으로 생성된 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 속성에 지정된 값을 사용하여 데이터 속성을 사용하여 요소 모양을 제어하는 ​​유연하고 효율적인 방법을 제공합니다.