CSS 필터를 사용하여 이미지를 그레이스케일로 쉽게 변환하려면 어떻게 해야 합니까?

CSS 필터를 사용하여 이미지를 그레이스케일로 변환

웹 개발 영역에서 이미지를 그레이스케일로 변환하는 것은 어려울 수 있습니다. SVG 또는 Canvas와 관련된 기존 방법은 시간이 많이 걸릴 수 있습니다. 그러나 CSS 필터의 출현으로 더 간단하고 브라우저 간 솔루션이 등장했습니다.

크로스 브라우저 그레이스케일 필터링

CSS 필터는 수정하는 편리한 방법을 제공합니다. 이미지를 포함한 요소의 모양. greyscale() 필터를 사용하면 색상 정보 제거 효과를 모방하여 이미지를 회색조로 변환할 수 있습니다.

이미지에 회색조 효과를 적용하려면 다음 CSS 속성을 사용하세요.

-webkit-filter: grayscale(1);
filter: grayscale(1);

예제 코드

다음 HTML을 고려하세요. 코드:

<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="CSS 필터를 사용하여 이미지를 그레이스케일로 쉽게 변환하려면 어떻게 해야 합니까?" >

이미지를 회색조로 표시하려면 CSS 스타일을 추가하세요.

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

호버 재정의

회색조 효과를 비활성화하려면 마우스를 올리면 다양한 필터 값을 지정할 수 있습니다.

img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

이렇게 하면 이미지가 되돌려집니다. 마우스를 위에 올리면 원래 색상으로 변경됩니다.

브라우저 호환성

CSS 필터는 Webkit, Edge 및 Firefox 35를 포함한 최신 브라우저에서 지원됩니다. 단, IE6-9에 대한 지원은 제한적입니다.

위 내용은 CSS 필터를 사용하여 이미지를 그레이스케일로 쉽게 변환하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!