CSS를 사용하여 요소 배경색 어둡게 하기

사용자 인터페이스를 개선하려면 모양을 변경하여 버튼과 같은 대화형 요소를 강조 표시해야 합니다. 일반적인 접근 방식은 마우스를 올리면 배경색을 어둡게 하는 것입니다.

처음에는 불투명도를 조정하려고 시도할 수 있지만 이는 색상과 투명도 모두에 영향을 미칩니다. 보다 구체적인 솔루션이 있습니다.

방법: 어두운 레이어 오버레이

배경 이미지를 사용하여 어두운 오버레이를 만듭니다. 이 방법은 배경을 어둡게 하면서 원래 텍스트 색상을 유지합니다.

CSS에서 오버레이 레이어를 구현합니다:

.Button {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

.Button:hover {
  background-color: /* Original background color */;
}

이 기술은 모든 배경 색상을 자동으로 어둡게 하며, 예에서 볼 수 있는 여러 색상도 마찬가지입니다.

 some text 
이 오버레이 방법을 활용하면 개발자는 마우스를 가져갈 때 요소 배경 색상을 쉽게 어둡게 할 수 있으므로 더 어두운 색상을 수동으로 계산하는 번거로움 없이 사용자 상호작용이 향상됩니다.