CSS 实现图片灰度效果兼容各种浏览器-css教程-PHP中文网

CSS 实现图片灰度效果兼容各种浏览器

php中文网

发布： 2016-05-16 12:07:59

原创

3284人浏览过

本章给大家介绍用CSS 实现图片灰度效果的方法，兼容各种浏览器如360浏览器。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

css实现图片灰度效果就是通过css样式让彩色图片呈现为灰色，相当于把一张图像的颜色模式调整为灰度，css可以通过以下几种方法来实现灰度效果。

方式1. IE滤镜

img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //标准写法
img { filter:Gray; } //简写

登录后复制

IE系列浏览器都支持IE滤镜的这一属性，非IE浏览器不支持。

方式2. CSS3滤镜

img { -webkit-filter: grayscale(100%); }

登录后复制

CSS3滤镜目前还不属于标准属性，现在暂时只有Google Chrome浏览器支持，其他浏览器均不支持

立即学习“前端免费学习笔记（深入）”；

CSS实现灰度效果可以让网页更加容易实现一些特效，还记得纪念5.12大地震国内很多网页在一夜之间全部变成灰色吗？给网站加上下面的样式就可以轻松实现：

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

html { filter:Gray; -webkit-filter: grayscale(100%); }

登录后复制

有人肯定要说了CSS实现灰度效果虽好，但不能做到兼容全部浏览器呀，怎么办呢？CSS做不到的事情，大家肯定会想到用JS来实现，下面给大家推荐一款JS灰度效果插件：

grayscale.js

使用方法：

//引入插件
<script type="text/javascript" src="grayscale.js"></script>

登录后复制

//调用插件
<script type="text/javascript">
    window.onload = function(){
        var el = document.getElementById( 'body' );
        grayscale( el );
    };
</script>

登录后复制

兼容所有浏览器，执行后会在元素上加入很多行内样式，如果你对兼容性要求不高的话建议使用CSS实现灰度效果。

大家都在看：

如何用css实现图片墙浮动布局如何通过css实现响应式卡片墙等高如何在CSS中用Flex实现卡片布局_Flex容器与子元素实践如何用CSS实现自适应图片_CSS object-fit属性与布局技巧如何用css实现响应式多列卡片等高

CSS 实现图片灰度效果 兼容各种浏览器

大家都在看：

CSS 实现图片灰度效果兼容各种浏览器