JavaScript 없이 CSS를 사용하여 배경 이미지를 동적으로 설정하려면 어떻게 해야 합니까?

CSS 변수를 사용하여 HTML 데이터 속성에서 배경 이미지를 동적으로 할당

질문:

CSS를 어떻게 활용할 수 있습니까? JavaScript를 사용하지 않고 HTML 데이터 속성에 저장된 값을 기반으로 요소의 배경 이미지를 자동으로 설정합니까?

답변:

CSS 변수는 이 문제에 대한 해결책을 제공합니다. CSS 변수를 사용하면 HTML 요소에 정의된 값을 기반으로 스타일을 동적으로 사용자 정의할 수 있습니다. 예는 다음과 같습니다.

HTML:

<div class="thumb">

CSS:

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

설명:

HTML 코드에서 스타일 속성은 --Background라는 CSS 변수를 정의하고 원하는 배경 이미지의 URL을 할당하는 데 사용됩니다. CSS 코드에서 background-image 속성은 해당 값에 대해 --Background 변수를 참조합니다.

페이지가 로드되면 브라우저는 HTML과 CSS 코드를 모두 구문 분석합니다. HTML에 정의된 CSS 변수를 인식하고 해당 값을 .thumb 클래스가 있는 요소의 background-image 속성에 적용합니다.

Codepen 데모:

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

참고:

CSS 변수는 Internet Explorer에서 지원되지 않습니다. IE 지원이 필요한 경우 대체 접근 방식이 필요할 수 있습니다.

위 내용은 JavaScript 없이 CSS를 사용하여 배경 이미지를 동적으로 설정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!