투명도에 영향을 주지 않고 마우스 오버 시 요소 배경 색상을 어둡게 하는 방법은 무엇입니까?

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

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

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

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

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

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

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

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

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

<div class="button"> some text </div>
<div class="button">

이 오버레이 방법을 활용하면 개발자는 마우스를 올리면 요소 배경색을 쉽게 어둡게 할 수 있어 사용자 상호 작용을 향상할 수 있습니다. 더 어두운 색조를 수동으로 계산해야 하는 번거로움.

위 내용은 투명도에 영향을 주지 않고 마우스 오버 시 요소 배경 색상을 어둡게 하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!