跨浏览器Html页面及图像灰度(grayscale)

meta标签规范

使用W3c CSS filter方式的grayscale实现Html页面及图像灰度

CSS3中借鉴IE私有滤镜的方式提供了标准的CSS Filter方案,支持grayscale灰度、sepia褐色、saturate饱和度、hue-rotate色相旋转、invert反色、opacity透明度、brightness亮度、contrast对比度、blur模糊、drop-shadow阴影等十种效果。

实现grayscale灰度Html页面及图像的代码:

1
2
3
4
5
6
7
gray-filter {
-webkit-filter: grayscale(100%); /* webkit内核支持程度较好 */
-moz-filter: grayscale(100%); /* 其他内核现在并不支持,为了将来兼容性书写 */
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* 标准写法 */
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :