CSS를 사용하여 마우스를 올리면 회색조 이미지 변환을 달성하고 IE 및 Firefox와의 호환성을 보장하는 방법은 무엇입니까?

CSS를 사용하여 마우스 오버 시 이미지 회색조 및 색상 변경

과제: 컬러 아이콘을 회색조로 변환하고 되돌리기 마우스를 위에 올리면 색상이 지정되어 IE 및 Firefox와 모두 호환됩니다.

해결책:

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

이 접근 방식은 CSS 필터를 사용하여 이미지를 회색조로 변환합니다. 필터 속성은 greyscale 클래스의 img 요소에 적용됩니다.

CSS:

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

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

2. CSS 및 SVG(인라인 SVG 포함):

IE10은 인라인 SVG를 지원하므로 더욱 깔끔한 솔루션이 가능합니다. SVG 이미지는 feColorMatrix 요소를 사용하여 필터링되고 채도 값을 0으로 설정하여 회색조 효과가 적용됩니다.

HTML:

<code class="html"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 377" width="400" height="377">
  <defs>
    <filter id="filtersPicture">
      <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
      <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
    </filter>
  </defs>
  <image filter="url(#filtersPicture)" x="0" y="0" width="400" height="377" xlink:href="image.jpg" />
</svg></code>

위 내용은 CSS를 사용하여 마우스를 올리면 회색조 이미지 변환을 달성하고 IE 및 Firefox와의 호환성을 보장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!