코드의 많은 요소는 다음 패턴을 따릅니다.
이러한 요소의 배경 이미지를 다음과 같이 설정하려고 합니다. 순수 CSS를 사용하여 data-image 속성에 저장된 값.
이를 달성하기 위해 다음 CSS 코드를 사용하려고 했습니다.
div[data-image] { border: 2px solid black; background-image: attr(data-image url); }
동안 테두리가 올바르게 표시되었으며 배경 이미지는 영향을 받지 않았습니다.
데이터 속성을 사용하는 것에 대한 실행 가능한 대안은 CSS 사용자 정의 속성을 사용하는 것입니다. 해당 값은 문자열로 제한되지 않으므로 유효한 유형을 할당할 수 있습니다.
또한 사용자 정의 속성을 사용하면 스타일시트 교체를 통해 값을 동적으로 업데이트할 수 있습니다.
사용자 정의 속성을 사용하는 방법은 다음과 같습니다. 배경 이미지를 설정하려면:
.kitten { width: 525px; height: 252px; background-image: var(--bg-image); } <div>
이 예에서 --bg-image 속성은 스타일시트에 정의되어 이미지에 할당됩니다. URL. div 요소의 스타일 속성은 인라인 스타일을 사용하여 --bg-image 값을 설정합니다. 이를 통해 스타일시트를 수정하지 않고도 각 개별 요소에 대한 배경 이미지를 지정할 수 있습니다.
사용자 정의 속성을 활용하면 데이터 속성을 통해 배경 이미지를 설정할 때 유연성과 유지 관리성이 향상됩니다.
위 내용은 데이터 속성을 사용하여 CSS에서 배경 이미지를 어떻게 동적으로 설정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!