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

Program / 글쓴이

컬러 비트 맵을 회색조로 표시하는 간단한 방법이 HTML/CSS있습니까?

IE 호환 가능 할 필요는 없으며 FF3 및 / 또는 Sf3에서 작동하면 충분합니다.

나는 SVGCanvas와 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="http://lorempixel.com/400/200/">

스 니펫 확장

Internet Explorer 10은 어떻습니까?

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

답변

에 이어 brillout.com의 대답은 , 또한 로마 Nurik의 대답은 , 다소하여 ‘더 SVG의 요구 사항을 완화, 당신은 단지 하나의 SVG 파일과 일부 CSS를 사용하여 파이어 폭스에서 이미지를 채도 수 있습니다.

SVG 파일은 다음과 같습니다.

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
</svg>

resources.svg로 저장하면 그레이 스케일로 변경하려는 모든 이미지에 대해 지금부터 재사용 할 수 있습니다.

CSS에서는 Firefox 특정 filter속성을 사용하여 필터를 참조합니다 .

.target {
    filter: url(resources.svg#desaturate);
}

원하는 경우 MS 독점 제품을 추가하고 그레이 스케일로 변환하려는 모든 이미지에 해당 클래스를 적용하십시오 (Firefox> 3.5, IE8에서 작동) .

편집 : 여기에 설명 filter된 SVG 접근 방식과 함께 SalmanPK의 답변에 새로운 CSS3 속성을 사용하는 방법을 설명 하는 멋진 블로그 게시물 이 있습니다. 이 접근법을 사용하면 다음과 같은 결과가 나타납니다.

img.desaturate{
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */
    filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

추가 브라우저 지원 정보는 여기에 있습니다 .

답변

Firefox의 경우 filter.svg 파일을 만들 필요가 없으며 data URI scheme을 사용할 수 있습니다 .

첫 번째 답변의 CSS 코드를 가져 와서 다음을 제공합니다.

filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%); /* Current draft standard */
-webkit-filter: grayscale(100%); /* New WebKit */
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; /* IE6+ */

“utf-8″문자열을 파일 인코딩으로 바꾸십시오.

브라우저는 두 번째 HTTP 요청을 수행 할 필요가 없으므로이 방법은 다른 방법보다 빠릅니다.

답변

업데이트 : IE10 및 IE11 용 JavaScript polyfill을 포함한 전체 GitHub 저장소로 만들었습니다 : https://github.com/karlhorky/gray

원래 SalmanPK의 답변을 사용 했지만 SVG 파일에 필요한 추가 HTTP 요청을 제거하기 위해 아래 변형을 만들었습니다. 인라인 SVG는 Firefox 버전 10 이상에서 작동하며 10보다 낮은 버전은 더 이상 글로벌 브라우저 시장의 1 %를 차지하지 않습니다.

그 이후 로이 블로그 게시물 에서 솔루션을 계속 업데이트 하여 색상으로 페이딩 지원, SVG로 IE 10/11 지원 및 데모에서 부분 회색조를 추가했습니다.

img.grayscale {
  /* Firefox 10+, Firefox on Android */
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");

  /* IE 6-9 */
  filter: gray;

  /* Chrome 19+, Safari 6+, Safari 6+ iOS */
  -webkit-filter: grayscale(100%);
}

img.grayscale.disabled {
  filter: none;
  -webkit-filter: grayscale(0%);
}

답변

JavaScript를 사용할 수 있으면이 스크립트가 원하는 것일 수 있습니다. 크로스 브라우저에서 작동하며 지금까지 잘 작동합니다. 다른 도메인에서로드 된 이미지에는 사용할 수 없습니다.

http://james.padolsey.com/demos/grayscale/

답변

오늘도 같은 문제가 발생했습니다. 처음에는 SalmanPK 솔루션을 사용 했지만 FF와 다른 브라우저마다 효과가 다르다는 것을 알았습니다. 이는 변환 매트릭스가 Chrome / IE의 필터와 같은 밝기에서만 작동하기 때문입니다. 놀랍게도 SVG의 대안적이고 간단한 솔루션도 FF4 +에서 작동하고 더 나은 결과를 생성한다는 것을 알았습니다.

<svg xmlns="http://www.w3.org/2000/svg">
  <filter id="desaturate">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

CSS로 :

img {
    filter: url(filters.svg#desaturate); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

또 하나의 경고는 IE10이 표준 호환 모드에서 더 이상 “필터 : 회색 :”을 지원하지 않으므로 작동하려면 헤더에서 호환 모드 스위치가 필요하다는 것입니다.

<meta http-equiv="X-UA-Compatible" content="IE=9" />

답변

CSS만으로 그레이 스케일을 달성하는 가장 간단한 방법은 filter속성 을 이용하는 것 입니다.

img {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

이 속성은 여전히 ​​완전히 지원되지 않으며 -webkit-filter모든 브라우저에서 지원하기 위해 속성이 필요 합니다.