CSS 변수로 상속된 값을 얻는 방법은 무엇입니까?

CSS 변수(사용자 정의 속성이라고도 함) 내에 상속 값을 저장하는 방법은 무엇입니까?

시나리오

다음 CSS 코드를 고려하세요.

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

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  margin-right: 30px;
  border-radius: 50%;
  position: relative;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 255, 0, 0.5);
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(30px);
  background: var(--color);
  filter: invert(1);
}

이 코드에서는 --color를 사용하여 .box 요소의 배경을 제어합니다. 의사 요소. 그러나 상위 .box 요소에서 색상을 상속하려는 상황이 발생할 수 있습니다.

CSS 변수 상속 문제

CSS에서는 상속 키워드가 CSS 변수. 이는 원하는 효과를 얻기 위해 상속할 --color를 직접 설정할 수 없음을 의미합니다.

해결책: 대체 값 및 초기 값 사용

이 제한을 극복하기 위해 다음 두 가지 기술을 사용할 수 있습니다.

1. 대체 값 사용:

CSS 변수의 대체 값을 활용하면 --color가 명시적으로 정의되지 않은 경우 속성에 상속을 사용하도록 지시할 수 있습니다.

background: var(--color, inherit);

그러나, 이 경우 --color는 항상 루트 수준에서 정의되고 상속되므로 대체 값은 절대 사용했습니다.

2. 초기 값 사용:

초기 값을 "undefine" --color에 사용하고 대체 값을 강제로 사용하도록 할 수 있습니다. CSS 사양에 따라 초기 값은 var()와 특별한 상호 작용이 있는 빈 값입니다.

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

.box {
  ...
  --color: initial;
}

이 수정을 통해 CSS 변수 내에서 상속 값 상속을 달성할 수 있습니다. 상위 요소의 색상을 기준으로 배경색을 제어합니다.

<div class="box red">

위 내용은 CSS 변수로 상속된 값을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!