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