HTML과 CSS만 사용하여 이미지를 그레이스케일로 변환할 수 있나요?

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

질문:

간단한 방법이 있나요? HTML/CSS만을 사용하여 회색조로 컬러 비트맵을 표시하는 방법 SVG 또는 Canvas의 복잡성?

답변:

Webkit에 CSS 필터가 등장하면서 크로스 브라우저 솔루션이 등장했습니다. 다음은 회색조 변환을 활성화하는 코드입니다.

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+, Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge, Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

설명을 위해 HTML 코드 예가 ​​있습니다.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png">

이 기술을 이미지에 적용하면 이미지가 회색조로 변환되어 단색 이미지 디스플레이를 위한 간단하고 효과적인 솔루션입니다.

위 내용은 HTML과 CSS만 사용하여 이미지를 그레이스케일로 변환할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!