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

CSS 및 Amp를 사용한 이미지 그레이스케일; 마우스 오버 시 색상 변경

이 게시물에서는 이 효과를 구현하고 브라우저 간 호환성을 제공하는 방법을 살펴보겠습니다.

순수 CSS(하나의 색상 이미지만 사용)

첫 번째 방법에서는 순수 CSS와 하나의 이미지만 사용합니다.

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8,..."); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}</code>

SVG 사용

이 방법은 인라인 SVG를 사용하여 회색조 효과와 별도의 이미지를 생성합니다. 컬러 버전:

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

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
  ...
  <image filter="url(&quot;#filtersPicture&quot;)" ... />
   </svg></code>

JavaScript

마지막으로 JavaScript를 사용하여 마우스를 올리면 이미지 소스를 변경할 수 있습니다.

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

<code class="js">const grayscaleImages = document.querySelectorAll('.grayscale');

grayscaleImages.forEach(image => {
  image.addEventListener('mouseover', () => {
    image.src = 'path/to/color_image.jpg';
  });

  image.addEventListener('mouseout', () => {
    image.src = 'path/to/grayscale_image.jpg';
  });
});</code>

이것들은 다음과 같습니다. 방법은 브라우저 간 호환성을 제공하며 이미지에 회색조 및 호버 효과를 쉽게 추가할 수 있습니다.

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