css3 filter滤镜

原创 2016年08月29日 21:39:13

css3滤镜用法

elem{
    filter: none | <filter-function > [ <filter-function> ]*
}

多个滤镜可以叠加使用,中间用空格隔开

CSS3 的10中滤镜

十种效果分别是:
1. blur 模糊 - 值为 ?px,指的是模糊半径
2. graysacle 灰度 - 值为 0~1
3. sepia 褐色 值 0~1
4. invert 反转颜色 值为 0~1
5. opacity 透明度 值为 0~1
6. contrast 对比度 值为 number
7. saturate 饱和度 值为 number
8. brightness 亮度 值为 number
9. hue-rotate 色相旋转 值为 angle
10. drop-shadow 语法跟其他css shadow语法相同

效果图(左侧原图,右侧滤镜效果图)

  • blur
    原图blur

  • opacity

原图opacity

  • grayscale

原图grayscale

  • sepia

原图sepia

  • saturate

原图saturate

  • brightness

原图brightness

  • contrast

原图contrast

  • invert

原图invert

  • hue-rotate

原图hue-rotate

  • drop-shadow

原图drop-shadow

本来看网上说支持的浏览器不多而且只有webkit浏览器支持。所以在写滤镜是要添加 -webkit-前缀 笔者尝试在win10 edge浏览器同样已经支持而且可以些 -webkit-前缀,也可以不写。不禁感慨edge确实不是以前颇为让人诟病的ie了。

所使用浏览器版本:
1. chrome 52.0.2743.116 m
2. Microsoft Edge 38.14393.0.0

十种滤镜组合起来,啧啧,效果不敢想

附上demo,可以自己复制,然后分别注释显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Filter</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    .box{
        height: 600px;
        width:300px;
        margin:40px auto;
        border:3px solid #ccc;
        border-radius:30px;

    }
    .contain{
        height:450px;
        width:300px;
        margin:70px auto 0;
        box-sizing: border-box;
        /*这里的url请自己替换*/
        /*background: url('pics/filter.jpg') center/280px 430px no-repeat border-box;*/
        background: url('pics/filter.jpg') center/cover no-repeat border-box;
        /*模糊 */
        /*-webkit-filter:blur(10px);*/
        /* 灰度*/
        -webkit-filter:grayscale(1);
        /* 褐色*/
        /*-webkit-filter:sepia(1);*/
        /* 饱和度*/
        /*-webkit-filter:saturate(3);*/
        /* 色相旋转*/
        /*-webkit-filter:hue-rotate(90deg);*/
        /* 颜色反转*/
        /*-webkit-filter:invert(1);*/
        /* 透明度*/
        /*-webkit-filter:opacity(.4);*/
        /* 对比度*/
        /*-webkit-filter:contrast(2);*/
        /* 亮度*/
        /*-webkit-filter:brightness(2);*/
        /* 阴影*/
        /*-webkit-filter:drop-shadow(10px 10px 2px #ccc);*/
    }
    .circle{
        height: 50px;
        width:50px;
        border:3px solid #ccc;
        border-radius:50%;
        margin:12px auto;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="contain"></div>
        <div class="circle"></div>
    </div>
</body>
</html>
版权声明:可以转载,欢迎斧正

CSS3 常用滤镜效果

css3属性 -webkit-filter   -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。 现在...
  • flower46273736
  • flower46273736
  • 2016年07月11日 10:29
  • 2374

元素中心旋转在CSS3和IE滤镜中的实现

元素中心旋转在CSS3和IE滤镜中的实现   中心旋转在CSS3中是很容易实现的,CSS3有提供一个rotate方法,直接使用它即可。 > div {   width:100px;heig...
  • goinni
  • goinni
  • 2014年12月11日 12:02
  • 1495

css3 滤镜效果(黑白滤镜、模糊化处理等)

原文地址:http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201301053419890/ -webkit-fi...
  • ROVAST
  • ROVAST
  • 2015年09月17日 14:00
  • 1971

css3中强大的filter(滤镜)属性

CSS3中强大的filter(滤镜)属性       博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧。当...
  • e62ces0iem
  • e62ces0iem
  • 2017年06月15日 13:40
  • 134

IE8兼容rgba-----滤镜filter的用法

今天遇到了一个问题,要在一个页面中设置一个半透明的白色div。这个貌似不是难题,只需要给这个div设置如下的属性即可: [css] view plain copy backgr...
  • huang100qi
  • huang100qi
  • 2016年09月08日 13:39
  • 3020

CSS3 filter 实现滤镜效果

css 的filter功能十分强大,类似于滤镜效果,可以实现像ps图像处理软件之类的图像处理效果。 大家可以参考这个网站: filter详解filter的使用方法如下: blur() 模糊,单位...
  • ayinvany
  • ayinvany
  • 2016年06月03日 17:24
  • 203

filter滤镜,ie9 hack写法

需求: 实现一个层旋转270deg,ie系列浏览器全兼容 源码: #demo{filter:progid:DXImageTransform.Microsoft.BasicIma...
  • kaosini
  • kaosini
  • 2015年02月27日 14:29
  • 603

SVG 滤镜(filter)

SVG 滤镜原语(filter primitive) feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix fe...
  • chy555chy
  • chy555chy
  • 2016年11月27日 14:21
  • 2056

使用CSS3滤镜开发模糊背景(毛玻璃)效果

功能说明: 在平时的开发中我们时常需要弹出某些对话框,同时希望用户能够忽略背景把注意力集中到弹框上,这时候从用户 体验的角度出发,我们可以选择将弹框背景模糊化,用以增强用户的实际体验效果。 实现...
  • xiaoguang44
  • xiaoguang44
  • 2017年03月06日 17:58
  • 1176

在Cocos2dx中,自由的更换滤镜

http://www.dreamfairy.cn/blog/index.php/2014/06/26/multi-filter-in-cocos2dx-2-x-like-sprite-in-as.ht...
  • oMingZi12345678
  • oMingZi12345678
  • 2014年12月25日 17:25
  • 1977
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3 filter滤镜
举报原因:
原因补充:

(最多只允许输入30个字)