사용자 정의 속성이 CSS의 배경 이미지 설정을 어떻게 향상시킬 수 있습니까?

사용자 정의 속성이 있는 배경 이미지

data-image 속성과 attr() 함수를 사용하여 배경 이미지를 설정하는 것은 문제가 될 수 있습니다. 대신 CSS만으로 이 효과를 얻으려면 사용자 정의 속성을 사용하는 것이 좋습니다.

사용자 정의 속성은 여러 가지 장점을 제공합니다.

• 값은 문자열로 제한되지 않으므로 허용되는 모든 속성 값을 허용합니다.
• 스와핑으로 런타임 업데이트 가능 stylesheets.

코드 예

다음은 데이터-이미지 속성을 기반으로 배경 이미지를 설정하기 위해 사용자 정의 속성을 사용하는 예입니다.

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}

<div class="kitten"><p>이 접근 방식을 사용하면 사용자 정의 속성을 통해 쉽게 배경 이미지를 할당할 수 있습니다. attr().</p></div>

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