html让图片变灰色,firefox浏览器中css如何把图片变成灰色？

firefox浏览器中css如何把图片变成灰色？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

firefox浏览器中使用css把图片变成灰色的方法

firefox浏览器中，可以利用CSS3的滤镜功能，使用filter: grayscale(%)来把图片变成灰色。

filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。值grayscale(%)

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

示例：

img {

-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */

filter: grayscale(100%);

}

把图片变成灰色：

效果图：

更多web前端知识，请查阅 HTML中文网 ！！