[css] CSS가있는 이미지 그레이 스케일 및 마우스 오버시 색상 변경?

Program / 글쓴이

색상이 지정된 아이콘 (링크가 될 것임)을 가져 와서 사용자가 아이콘 위에 마우스를 놓을 때까지 회색조로 바꾸려고합니다 (이미지에 색상을 지정합니다).

이것이 가능하고 IE 및 Firefox가 지원되는 방식으로 가능합니까?

답변

이를 수행하는 방법에는 여러 가지가 있으며 아래 몇 가지 예를 통해 자세히 설명하겠습니다.

순수 CSS (하나의 컬러 이미지 만 사용)

img.grayscale {
  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"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

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

코드 스 니펫 표시

이 기술과 관련된 기사는 여기에서 찾을 수 있습니다 .

순수 CSS (회색조 및 컬러 이미지 사용)

이 접근 방식에는 이미지 사본이 두 개 필요합니다. 하나는 회색조이고 다른 하나는 풀 컬러입니다. CSS :hover의사 선택기를 사용 하여 요소의 배경을 업데이트하여 두 가지 사이를 전환 할 수 있습니다.

#yourimage {
    background: url(../grayscale-image.png);
}
#yourImage:hover {
    background: url(../color-image.png};
}

코드 스 니펫 표시

hover()같은 방식으로 jQuery의 기능 과 같은 자바 스크립트 기반 호버 효과를 사용하여이 작업을 수행 할 수도 있습니다 .

타사 라이브러리 고려

채도 빼기의 라이브러리는 쉽게 주어진 요소 또는 이미지의 그레이 스케일 버전과 풀 컬러 버전 사이를 전환 할 수있는 공통 라이브러리입니다.

답변

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

고통 스럽거나 이미지 조작 라이브러리처럼 들리는 두 개의 이미지를 사용할 필요조차 없습니다. 크로스 브라우저 지원 (현재 버전)을 사용하고 CSS 만 사용하면됩니다. 이것은 이전 브라우저의 색상 버전으로 돌아가는 점진적 향상 접근 방식입니다.

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

다음과 같은 filters.svg 파일 :

<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>

답변

http://www.diagnomics.com/ 에서 다음 코드를 사용합니다 .

확대 효과 (스케일)를 사용하여 흑백에서 색상으로 부드럽게 전환

    img.color_flip {
      filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
      filter: gray; /* IE5+ */
      -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
      -webkit-transition: all .5s ease-in-out;
    }

    img.color_flip:hover {
      filter: none;
      -webkit-filter: grayscale(0);
      -webkit-transform: scale(1.1);
    }

답변

색상과 단색의 두 가지 버전이 모두 저장된 스프라이트 를 사용할 수 있습니다 .

답변

여기 데모가 있습니다. IE7에서도 작동합니다.

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

과

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/

답변