将图像转换为 HTML/CSS 中的灰度:一个简单的解决方案
在 CSS 的帮助下可以以灰度显示彩色位图过滤器。这种方法提供了跨浏览器解决方案,并且实现起来相对简单。
要使用 CSS 对图像应用灰度效果,只需将以下代码添加到样式表中:
img { filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ }
此代码会将页面上的所有图像转换为灰度。或者,您可以定位特定图像:
#my-image { /* CSS styles */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ }
要禁用悬停时的灰度效果,请添加以下代码:
#my-image:hover { -webkit-filter: grayscale(0); filter: none; }
使用这个简单的 CSS 解决方案,您可以轻松显示图像灰度,无需 SVG 或 Canvas 等复杂技术。
以上是如何仅使用 HTML 和 CSS 轻松将图像转换为灰度?的详细内容。更多信息请关注PHP中文网其他相关文章!