CSS 배경 이미지를 설정하기 위해 데이터 속성을 어떻게 사용할 수 있습니까?

데이터 이미지 속성의 CSS 배경 이미지

HTML에서 요소에는 추가 정보를 저장하는 데 사용되는 데이터 속성이 있는 경우가 많습니다. 배경 이미지를 데이터 속성 값으로 설정하는 것은 CSS를 통해서만 가능합니다.

문제

제공된 CSS 코드:

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

배경 이미지를 표시하지 못합니다.

해결책: 사용자 정의 속성

대체 접근 방식은 URL을 포함한 모든 유형의 값을 설정할 수 있는 CSS 사용자 정의 속성을 사용하는 것입니다.

.kitten {
  background-image: var(--bg-image);
}

그런 다음 요소 스타일에서 사용자 정의 속성을 설정합니다. 속성:

<div class="kitten">

이 접근 방식을 사용하면 CSS 변경이나 스크립트 상호 작용을 통해 배경 이미지를 동적으로 업데이트할 수 있습니다.

위 내용은 CSS 배경 이미지를 설정하기 위해 데이터 속성을 어떻게 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!