如何使用 CSS 创建在鼠标悬停时重新着色的灰度图像？-css教程-PHP中文网

如何使用 CSS 创建在鼠标悬停时重新着色的灰度图像？

Mary-Kate Olsen

发布： 2024-10-26 08:43:30

原创

1035 人浏览过

How to Create a Grayscale Image That Re-Colors on Mouseover Using 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中文网其他相关文章！