마우스를 올리면 색상이 다시 바뀌는 CSS를 사용하여 회색조 이미지를 어떻게 만들 수 있나요?

CSS를 사용한 이미지 회색조 및 마우스 오버 시 색상 변경

CSS로 이미지 회색조를 달성하고 마우스로 색상을 다시 지정할 수 있습니다. 여러 가지 방법을 사용하는 것보다. 개요는 다음과 같습니다.

순수한 CSS(단일 색상 이미지 사용)

CSS 필터를 사용하여 이미지를 회색조로 변환하고 마우스 오버 시 효과를 제거합니다.

<code class="css">img.grayscale {
  filter: grayscale(100%);
}

img.grayscale:hover {
  filter: none;
}</code>

CSS와 JavaScript의 조합

회색조 이미지와 컬러 이미지를 생성하고 마우스 인 및 마우스 아웃 이벤트에 대한 가시성을 전환합니다.

<code class="css">img.grayscale {
  opacity: 1;
}

img.colored {
  opacity: 0;
}</code>

<code class="js">document.querySelector('img').addEventListener('mouseover', () => {
  document.querySelector('img.colored').style.opacity = 1;
  document.querySelector('img.grayscale').style.opacity = 0;
});

document.querySelector('img').addEventListener('mouseout', () => {
  document.querySelector('img.colored').style.opacity = 0;
  document.querySelector('img.grayscale').style.opacity = 1;
});</code>

SVG 필터 사용(IE10만 해당)

필터와 함께 인라인 SVG를 활용하여 채도 효과를 적용하고 마우스 오버 시 변경:

<code class="html"><svg>
  <defs>
    <filter id="grayscale">
      <fecolormatrix type="saturate" values="0"></fecolormatrix>
    </filter>
  </defs>
  <image filter="url(#grayscale)" ...></image>
</svg></code>

채도 값을 조정하여 회색조 수준을 제어할 수 있습니다. 이 방법은 IE10 이상에서 지원됩니다.

위 내용은 마우스를 올리면 색상이 다시 바뀌는 CSS를 사용하여 회색조 이미지를 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!