轩枫阁

首页 / Web前端 / CSS / CSS3黑白滤镜grayscale的应用

CSS3黑白滤镜grayscale的应用

阅读：21421 评论：7 作者：ivan 分类：CSS、Web前端

前言

CSS3 Filter与我们所熟悉的CSS Filter是完全不同的两个概念，也不是所谓的IE滤镜，它是指通过CSS或SVG渲染元素概念可以描述的元素，包括子元素。

语法

语法很简单，grayscale的参数中100%表示黑白色调，0%表示彩色。

1
2
3
4
5
6
7
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
 
filter: grayscale(100%);
filter: gray;

demo

链接

http://xuanfengge.com/demo/201408/gray/

动图

gray1

实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.sprite-clients {
    background: url(clients.png);
    width: 200px;
    height: 50px;
    filter: gray;
    -webkit-filter: grayscale(100%);
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.clientcell .sprite-clients:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

更多资料

使用CSS将图片转换成黑白(灰色、置灰)

214/470
216/470

相关阅读

文章评论

取消回复
  • 姬香凝

    鼓励一下，文章非常好

    2015 年 12 月 13 日 下午 12:57
  • 互传站长网

    天苍苍，野茫茫，风吹草低见牛羊

    2014 年 8 月 18 日 下午 10:10
  • 麻凯倩

    赞一个！长知识啦！

    2014 年 8 月 18 日 下午 7:59
  • 麻凯倩

    赞一个！长知识啦！

    2014 年 8 月 18 日 下午 7:59
    • 轩枫

      欢迎来访，哈哈

      2014 年 8 月 18 日 下午 9:42
    • 麻凯倩

      导航栏好酷，求知道是什么原理实现的

      2014 年 8 月 18 日 下午 10:45
      • 轩枫

        HTML5

        2014 年 8 月 19 日 下午 6:50

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制，可以录制弹奏的曲子
    开始录制 完成录制 取消
    马上试听 重新录制 提交此曲
    分享钢琴节奏： 新浪微博 QQ空间