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大地震国内很多网页在一夜之间全部变成灰色吗?给网站加上下面的样式就可以轻松实现:

1html { 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 实现图片灰度效果 兼容各种浏览器的更多相关文章

  1. CSS 实现图片灰度效果

    非原创-从网上收索出来的文章 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. 方式1. IE滤镜 img ...

  2. css hover图片hover效果兼容ie8

    例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  3. 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. DIV以及图片水平垂直居中兼容多种浏览器

    纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈   第一种:全CSS控制 ...

  5. css 改变图片灰度颜色

    我一直喜欢灰度图像因为我认为他们看起来更有艺术感.很多图片编辑如Photoshop很容易把你的彩色图像变成灰度.甚至有选择调整颜色深度和色调.不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异 ...

  6. css 实现图片灰度

    先看效果鼠标移入图片中摁下向左移动 图片由灰度变为原图   向右移动原图变灰度 ​ 代码如下:尚未做优化 <style> *{ margin:0; padding:0; } #img{ w ...

  7. CSS美化 input type=file 兼容各个浏览器(转)

    HTML代码: <FORM> <A class=btn_addPic href="javascript:void(0);"><SPAN>< ...

  8. css实现图片闪光效果

    1.这个效果是看到京东商城上的一个下效果,原本的思路是 用js控制一个图片在某张需要闪光的图片上重复出现,但是 网上找了一些资料,竟然是用css写的,真是太帅了!!! 2.原理:在需要闪光的图片前添加 ...

  9. iOS 加载本地 HTML 文件 CSS 样式图片无效果

    在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图 ...

随机推荐

  1. js表格排序 & 去除字符串空格

    // a:列数 bool:排序升序判断参数 true false Str:支持多列 function newUnitSort(a, bool, str) { var oTable = document ...

  2. 闲来无事写写-Huffman树的生成过程

    前言:最近项目上一直没事干,感觉无聊到了极点,给自己找点事做,补一下大学没有完成的事情,写一个huffman算法Java版的,学校里面写过c语言的. 因为很久没搞数据结构和算法这方面了(现在搞Java ...

  3. C winpcap 网络抓包 并获取IP TCP 协议的相关信息

    以太网协议分析函数: void ethernet_protocol_packet_handle (u_char *argument, const struct pcap_pkthdr *packet_ ...

  4. 捕捉小括号获取的内容保存在RegExp的$1 $2..属性中

    ~~~~捕捉小括号获取的内容保存在RegExp的$1 $2..属性中 var reg=/^(-?\d+)(px|pt|em|in)?$/;if(reg.test(svalue)){           ...

  5. DB2 权限控制

    http://blog.csdn.net/liujinwei2005/article/details/8606983 http://www.ibm.com/developerworks/cn/data ...

  6. COB工艺流程及基本要求

    工艺流程及基本要求 清洁PCB---滴粘接胶---芯片粘贴---测试---封黑胶加热固化---测试---入库 1.清洁PCB 清洗后的PCB板仍有油污或氧化层等不洁部分用皮擦试帮定位或测试针位对擦拭的 ...

  7. 转:PAT练习题概览

    AT(pat.zju.edu.cn)是一个面向 C/C++程序的 Online Judge 系统.相比 ZOJ,HDOJ,POJ 等 ACM 题库,PAT 的题目非常基础,对于数据结构.算法的入门是比 ...

  8. VC获取精确时间的做法

    声明:本文章是我整合网上的资料而成的,其中的大部分文字不是我所为的,我所起的作用只是归纳整理并添加我的一些看法.非常感谢引用到的文字的作者的辛勤劳动,所参考的文献在文章最后我已一一列出. 对关注性能的 ...

  9. 【蓝桥杯】入门训练 Fibonacci数列

      入门训练 Fibonacci数列   时间限制:1.0s   内存限制:256.0MB        问题描述 Fibonacci数列的递推公式为:Fn=Fn-1+Fn-2,其中F1=F2=1. ...

  10. zend framework多模块配置

    上次接触zend framework已经很久远了,10年的事情了.最近在做一个项目,时间不紧,就又把ZF拿出来折腾.而我发现以前做ZF的记忆已经在我脑中如梦幻泡影,消失无踪,为了配置多模块还又去查了资 ...