CSS를 사용하여 마우스 오버 시 색상 복원으로 그레이스케일을 달성하는 방법은 무엇입니까?

CSS를 사용하여 마우스 오버 시 색상 복원으로 그레이 스케일링

마우스 오버 시 색상 복원으로 그레이 스케일 표현은 다양한 방법을 통해 가능합니다. , IE와 Firefox 모두에서 브라우저 간 호환성을 제공합니다.

방법 1: 순수 CSS(단일 색상 이미지 사용)

이 기술은 공급업체의 필터 속성을 활용합니다. 지원되는 모든 브라우저에서 이미지를 회색조로 지정하는 접두사:

<code class="css">img.grayscale {
  filter: url("data:image/svg+xml;utf8, ..."); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+ */
}

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

방법 2: 순수 CSS(두 개의 이미지 사용)

또 다른 접근 방식은 두 개의 이미지를 사용하는 것입니다: 회색조 버전과 컬러 버전. 회색조 이미지가 처음에 표시되고 마우스 오버 상태가 컬러 이미지로 전환됩니다.

<code class="css">img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}</code>

<code class="html"><img class="grayscale" src="grayscale_image.jpg">
<img class="colored" src="colored_image.jpg"></code>

방법 3: CSS 필터를 사용하는 SVG

IE10의 경우 최신 브라우저에서는 인라인 SVG를 사용하여 필터를 적용할 수 있으므로 그레이스케일 효과를 동적으로 제어할 수 있습니다.

<code class="css">svg image {
  transition: all .6s ease;
}

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

<code class="xml"><svg ...>
  <defs>
    <filter id="filtersPicture">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image filter="url(#filtersPicture)" ... />
</svg></code>

위 내용은 CSS를 사용하여 마우스 오버 시 색상 복원으로 그레이스케일을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!