CSS 변수에 상속된 값을 어떻게 저장할 수 있나요?

CSS 변수의 값 상속

CSS 영역에서 CSS 변수라고도 하는 사용자 정의 속성은 엄청난 유연성과 제어 기능을 제공합니다. 스타일. 상속된 값을 변수 내에 저장하려고 할 때 일반적인 질문이 발생합니다. 해결책을 살펴보겠습니다.

도전

다음 코드를 고려하세요.

:root {
  --color:rgba(20,20,20,0.5);
}

.box {
  --color: inherit;
  background: var(--color);
}

여기서는 배경이 :root 요소의 색상입니다. 그러나 --color 값으로 상속을 사용하는 것은 상속 규칙으로 인해 작동하지 않습니다.

해결책: 대체 값 및 초기 키워드

상속된 값을 저장하려면 , CSS 변수의 대체 값 기능을 활용할 수 있습니다. 다음을 설정할 수 있습니다.

background: var(--color, inherit);

이것은 --color가 정의되지 않은 경우 상속을 사용하도록 브라우저에 지시합니다. 그러나 --color는 항상 :root 수준에서 정의되므로 fallback을 사용하지 않습니다.

이 문제를 해결하려면 초기 키워드를 사용하여 --color를 초기 값으로 재설정할 수 있습니다.

.box {
  --color: initial;
  background: var(--color, inherit);
}

initial을 사용하면 사용자 정의 속성이 효과적으로 설정 해제되어 상속이 적용될 수 있습니다. 이 코드는 :root 요소에서 색상을 성공적으로 상속합니다.

위 내용은 CSS 변수에 상속된 값을 어떻게 저장할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!