CSS를 사용하여 마우스 오버 시 색상이 다시 바뀌는 회색조 이미지를 만드는 방법은 무엇입니까?

마우스 오버 재채색을 사용한 CSS 그레이스케일링

쿼리:

처음에는 그레이스케일이지만 전환되는 이미지를 생성합니다. 마우스를 위에 올리면 색상이 지정됩니다. IE 및 Firefox 호환 CSS 기술을 사용하여 이를 구현합니다.

해결책:

순수 CSS(단색 이미지 사용):

이 방법은 CSS 필터를 사용합니다. 그레이스케일 효과를 얻고 마우스오버 시 필터를 제거하여 원래 색상을 표시합니다.

<code class="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+ &amp; Safari 6+ */
}

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

CSS 전환이 포함된 인라인 SVG:

이 접근 방식은 SVG 요소에 이미지를 삽입하고 CSS를 적용합니다. 마우스를 올리면 회색조와 색상 간 페이드 전환:

<code class="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");
  filter: gray;
  -webkit-filter: grayscale(100%);
  -webkit-transition: all .6s ease;
  -webkit-backface-visibility: hidden;
}

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

svg {
  background: url(https://image-source.jpg);
}

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}</code>

위 내용은 CSS를 사용하여 마우스 오버 시 색상이 다시 바뀌는 회색조 이미지를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!