HTML과 CSS만 사용하여 컬러 이미지를 그레이스케일로 변환하려면 어떻게 해야 합니까?

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

이 질문은 컬러 비트맵 이미지를 그레이스케일로만 표시하는 간편한 방법을 모색합니다. HTML과 CSS를 통해. 목표는 SVG나 Canvas를 사용하는 복잡성을 피하고 Firefox 3 및 Safari 3 이상과 호환되는 솔루션을 찾는 것입니다.

다행히도 Webkit에 CSS 필터가 등장하면서 크로스 브라우저 솔루션이 제공되었습니다. 이 작업을 위해. 다음 코드 조각은 원하는 회색조 효과를 얻는 방법을 보여줍니다.

<img src="image.png">

필터 속성은 Internet Explorer 6~9 및 Microsoft Edge에서 지원되는 반면, -webkit-filter 속성은 Google Chrome에서 지원됩니다. Safari 6 및 Opera 15.

호버에서 회색조 효과를 비활성화하려면 다음 CSS 규칙을 사용할 수 있습니다. 적용:

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

이 간단한 솔루션을 사용하면 SVG 또는 Canvas의 추가 오버헤드 없이 HTML/CSS에서 컬러 이미지를 회색조로 변환할 수 있습니다.

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