HTML / CSS에서 이미지를 회색조로 변환

 

질문 : HTML / CSS에서 이미지를 회색조로 변환

---

HTML/CSS 로 그레이 스케일로 컬러 비트 맵을 표시하는 간단한 방법이 있습니까?

IE와 호환 될 필요는 없습니다 (그렇지 않을 것이라고 생각합니다). FF3 및 / 또는 Sf3에서 작동한다면 저에게 충분합니다.

SVG 와 Canvas로 모두 할 수 있다는 것을 알고 있지만 지금은 많은 작업을하는 것 같습니다.

이것을하는 정말 게으른 사람의 방법이 있습니까?

답변

---

CSS 필터에 대한 지원이 Webkit에 포함되었습니다. 이제 브라우저 간 솔루션이 있습니다.

 

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

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

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

Internet Explorer 10은 어떻습니까?

회색 과 같은 폴리 필을 사용할 수 있습니다.

출처 : https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css