如何使用 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"></fecolormatrix></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%);
}</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"></fecolormatrix></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中文网其他相关文章！