CSS를 사용하여 색상의 밝기를 동적으로 조정하려면 어떻게 해야 합니까?

CSS 필터를 사용한 동적 색상 조작

질문:

어떻게 동적으로 밝게 하거나 색상을 밝게 할 수 있습니까? CSS를 사용하여 지정된 색상을 어둡게 하시겠습니까? 색상을 백분율로 줄일 수 있나요?

답변:

예, CSS 필터를 사용하면 색상을 백분율로 줄이는 것이 가능합니다. 방법은 다음과 같습니다.

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

이 예에서는 버튼의 기본 색상이 빨간색(#ff0000)으로 설정되어 있습니다. 마우스 오버 시 버튼에 필터를 적용하면 밝기가 15% 감소하여 더 어두운 빨간색 음영이 됩니다. 백분율을 조정하여 원하는 밝기 또는 어두움 수준을 얻을 수 있습니다.

이 접근 방식은 caniuse 호환성 표에서 널리 사용 가능하다는 점에서 알 수 있듯이 모든 최신 브라우저와 호환됩니다.

위 내용은 CSS를 사용하여 색상의 밝기를 동적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!