새로운 16진수 코드를 찾지 않고 마우스 오버 시 요소의 배경을 어둡게 하려면 어떻게 해야 합니까?

CSS로 요소 배경색 향상: 더 간단한 접근 방식

마우스를 올리면 요소의 배경색을 약간 어둡게 하려고 할 때 개발자는 종종 공들여 더 어두운 16진수 코드를 찾는 데 의존합니다. 원래 색상과 일치시킵니다. 그러나 보다 신속한 솔루션은 반투명 오버레이를 활용하는 CSS의 기능에서 나타납니다.

기존 배경 위에 반투명 어두운 레이어를 통합하면 원하는 어둡게 하기 효과를 쉽게 얻을 수 있습니다. 이 방법을 사용하면 배경 모양을 원활하게 전환하면서 텍스트의 원래 색상을 유지할 수 있습니다.

코드 예

이 기술을 설명하려면 다음 CSS 코드를 고려하세요.

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
}

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

이 스니펫에서 버튼의 마우스 오버 상태는 배경색과 40% 불투명 검정색 레이어를 겹쳐 놓은 선형 그라데이션을 특징으로 합니다. 그 결과 다양한 배경 색상에 자연스럽게 어울리는 세련되고 미묘하게 어두운 배경 효과가 탄생했습니다.

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

위 내용은 새로운 16진수 코드를 찾지 않고 마우스 오버 시 요소의 배경을 어둡게 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!