灰度图片 css_使用CSS滤镜将图像显示为灰度

最新推荐文章于 2024-07-04 18:24:34 发布

culuo8053

最新推荐文章于 2024-07-04 18:24:34 发布

阅读量686

点赞数

文章标签：过滤器 opencv java 计算机视觉 css

原文链接：https://davidwalsh.name/convert-images-grayscale

版权

本文介绍了如何使用CSS滤镜将图像显示为灰度，只需应用简单的CSS代码即可实现。此外，还提到了CSS过滤器的更多可能性，如动画效果，并指出尽管CSS滤镜会影响在线显示，但原始图像在下载时仍保持彩色。

摘要由CSDN通过智能技术生成

灰度图片 css

CSS filters aren't yet widely supported but they are indeed impressive and a modern need for web imagery. CSS filters allow you to modify the display of images in a variety of ways, one of those ways being displaying images as grayscale.

CSS过滤器尚未得到广泛支持，但它们确实令人印象深刻，并且是对Web图像的现代需求。 CSS过滤器允许您以多种方式修改图像的显示，其中一种方式是将图像显示为灰度。

View Demo 观看演示

Doing so requires the most minimal of CSS:

这样做需要最少CSS：


img.bw {
	filter: grayscale(1);
}

You can even animate an image to or from grayscale:

您甚至可以为图像设置灰度或从灰度设置动画：


img.bw {
	filter: grayscale(0);
}

img.bw.grey {
	filter: grayscale(1);
	transition-property: filter;
	transition-duration: 1s;	
}

CSS filters allow much more than just grayscale adjustments, so if you haven't taken the time, please play around with my CSS filter sandbox. Remember that if the user chooses to download the image, it is downloaded in its original colored displays, but for online display purposes, CSS filters do the trick!

CSS过滤器不仅仅可以进行灰度调整，因此，如果您还没有花时间，请试用我的CSS过滤器沙箱。请记住，如果用户选择下载图像，则会以其原始的彩色显示器下载该图像，但是出于在线显示目的，CSS过滤器可以解决问题！

View Demo 观看演示