跨浏览器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页面及图像的代码:

gray-filter {
 -webkit-filter: grayscale(100%);    /* webkit内核支持程度较好 */
    -moz-filter: grayscale(100%);    /* 其他内核现在并不支持,为了将来兼容性书写 */
     -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
         filter: grayscale(100%);    /* 标准写法 */
}
上一篇 CSS3 grayscale滤镜图片变黑白
下一篇 H5前端UI框架
目录
文章列表
1 Spring Boot、Spring Cloud与微服务总结
Spring Boot、Spring Cloud与微服务总结
2
悲观锁和乐观锁的原理及使用场景
悲观锁和乐观锁的原理及使用场景
3
高等数学基础:方向导数的计算与梯度
高等数学基础:方向导数的计算与梯度
4
MySQL 导出数据
MySQL 导出数据
5
SSH公钥登录基本步骤
SSH公钥登录基本步骤
最新评论
一位WordPress评论者
一位WordPress评论者
2月12日
您好,这是一条评论。若需要审核、编辑或删除评论,请访问仪表盘的评论界面。评论者头像来自 Gravatar。