如何使用 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中文网其他相关文章！