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

87

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

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

css  mouseover  grayscale 
— 메타
소스
2
거의 중복 됨 ... stackoverflow.com/q/609273/670377
— Tom Sarduy
반대로하면 더 흥미로운 효과가 아닐까요? 마우스 커서를 어두운 세계에 색을 입히는 마술 지팡이처럼 보이게 하시겠습니까?
— X10D

답변:

244

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

순수 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의 기능 과 같은 자바 스크립트 기반 호버 효과를 사용하여이 작업을 수행 할 수도 있습니다 .

타사 라이브러리 고려

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

— 리온 윌리엄스
소스
만약 이미지가 다른 웹 사이트에 링크되어야한다면 이미지가 배경으로 설정되어 있다면 어떻게 할 수 있을까요?
— Meta
1
같은 방식으로 작동합니다. 섹션 1의 데모를 확인하십시오. 다른 질문이 있으면 기꺼이 도와 드리겠습니다.
— Rion Williams 2011 년
1
여러분, 이것이 사파리에서 작동하지 않는다는 것을 아는 사람이 있습니까? 방금 확인한 후이 문제를 발견했습니다. 해결 방법이 있습니까?
— Gajen 2014-08-06
13

답변 : 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>
— 우리아 블래 더윅
소스
6

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);
    }
— Stefan Gruenwald
소스
웹킷 브라우저에서 잘 작동합니다! 코드는 파이어 폭스 브라우저에서 나를 위해 작동하지 않고 다시, 나는 그것이 SVG 파일 함께 할 수있는 뭔가가 나는이 바이올린에 비트 맵을 사용하고 생각 jsfiddle.net/coolwebs/num04rya/10의 하지만 뭔가 이상한 - 전환 사파리의 효과는 .... 롤오버의 이미지 '바보'를 만든다
— 라이언 Coolwebs에게
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.