在网站加入友情链接的LOGO时，因为不同logo颜色的问题，和主题色调可能产生冲突，
我选择用CSS3滤镜让logo变黑白，hover时变回原本的彩色
CSS代码：
.gray {

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray;

}

CSS3 grayscale滤镜图片变黑白实例页面的更多相关文章

  1. CSS3 grayscale滤镜图片变黑白

    1. 使整个页面的图片都变成灰色的,代码如下. html{     font-size: 100%;     -webkit-text-size-adjust: none;    -ms-text-s ...

  2. CSS3 grayscale滤镜+SVG使图片变黑白实例页面

    CSS代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale( ...

  3. CSS grayscale滤镜+SVG使图片变黑白实例页面

    http:/CSS 地址:/www.runoob.com/cssref/css3-pr-filter.html CSS代码: .gray { -webkit-filter: grayscale(%); ...

  4. css3 图片变黑白 filter

    /*图片黑白*/ .img-gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: gray ...

  5. java 让图片变黑白

    import java.awt.Image;import java.awt.color.ColorSpace;import java.awt.image.BufferedImage;import ja ...

  6. CSS3动画@keyframes图片变大变小颜色变化

    在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小damo,看着还有些魔性嘞. html: ...

  7. CSS3实现鼠标移动到图片上图片变大

    CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义 <!DOCTYPE html><html> <head&g ...

  8. [Android实例] app引导页(背景图片切换加各个页面动画效果)（申明：来源于网络）

    [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络) 地址: http://www.eoeandroid.com/thread-918356-1-1.html h ...

  9. CSS让图标变成白色或黑色实例页面 和css变灰色

    css代码 .black { filter: brightness(0); } .white { filter: brightness(100); } html代码 <h4>原图</ ...

随机推荐

  1. 开源DirectShow分析器和解码器： LAV Filter

    LAV Filter 是一款开源的DirectShow视频分离和解码软件,他的分离器LAVSplitter封装了FFMPEG中的libavformat,解码器LAVAudio和LAVVideo则封装了 ...

  2. Struts2六、为应用指定多个配置文件

    为了使用Struts.xml更简洁,更利于维护,我们可以把Struts.xml要配置的Action信息分类别放在其他的XML文件中,使用include在struts.xml中加载这些文件: 将Web. ...

  3. SQLServer,仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时,才能为表xx中的标识列指定显式值

    情景: 如果此表的主键或者其中有一个列使用了  IDENTITY(1,1) 自增长时,但又想手动为此列指定值时,当用如下解决方案: set identity_insert 表名 ON 使用此命令把表的 ...

  4. JavaScript 的DOM操作

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. Windows 对象操作 ...

  5. poj2121--暴力解法

    #include<iostream> #include<string> using namespace std; ]={"negative","z ...

  6. Linux学习之(())操作符

    在刚开始学习inux shell脚本编程时候,对于它的 四则运算以及逻辑运算.估计很多朋友都感觉比较难以接受.特变逻辑运算符”[]”使用时候,必须保证运算符与算数 之间有空格. 四则运算也只能借助:l ...

  7. Linux学习之less命令

    less 工具也是对文件或其它输出进行分页显示的工具,应该说是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻 ...

  8. mud目录命令说明

      目錄結構 以下列出的是 ES2 mudlib 根目錄下標準的子目錄結構,以及簡短的說明. /adm 儲存由系統管理者所管理的程式與資料檔. /std 儲存標準物件的程式碼. /obj 儲存通用物件 ...

  9. php多维数组按用户自定义顺序排序uasort()

    多维数组如果需要按照某个字段值进行排序,可以尝试array_multisort().但有一个前提,这个字段值的排序是要一定规律的,如字符升序a-z,或者数字降序等等. 现有多维数组如下: $arr = ...

  10. Kotlin Vertx

    Kotlin & Vertx Kotlin 是一门好语言,值得大家了解一下. Vertx 是一个好框架,也值得大家了解一下. Kotlin 写过js,也写过一点点go,主力一直是java.用了 ...