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中文网 !!