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

에 이어 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 */
}

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

답변

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+ */

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%);
}

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

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

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

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