CSS를 사용하여 마우스 오버 시 버튼을 어떻게 어둡게 할 수 있나요?

CSS로 버튼 어둡게 하기

버튼 위로 마우스를 가져갈 때 배경색을 약간 어둡게 하여 시각적 효과를 높이는 것이 일반적입니다. 더 어두운 16진수 코드를 수동으로 결정하는 것도 가능하지만 지루할 수 있습니다.

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">

다음번에 마우스를 올리면 버튼의 배경을 어둡게 해야 하는 경우 가볍고 사용자 정의 가능한 솔루션을 위해 CSS의 섀도우 캐스팅 기능을 활용하세요.

위 내용은 CSS를 사용하여 마우스 오버 시 버튼을 어떻게 어둡게 할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!