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 filter(滤镜) 属性

CSS3 filter(滤镜) 属性 实例 修改所有图片的颜色为黑白 (100% 灰度): img {     -webkit-filter: grayscale(100%); /* Chrome,...

CSS3 filter 实现滤镜效果

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

CSS3 filter(滤镜)

filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。 Filter 函数 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75...

CSS3 -webkit-filter 滤镜效果

from: http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201301053419890/ -webkit-filte...

CSS3 -webkit-filter 滤镜效果

webkit-filter,其存在的作用通常是进行图片的处理 原图样式:   网页代码: -webkit-filter img{-webkit-filter:g...

CSS3 filter(滤镜) 使用

图片做模糊的处理

CSS3 滤镜学习

html篇 样式篇 grayscale sepia saturate hue-rotate invert opactiy brightness contrast blur drop-shadow 综合...

神奇的CSS3滤镜组合应用效果教程

神奇的CSS3滤镜组合应用效果教程 作者:夜飞羽 来源:mxria.com  时间:2012-02-21        通过使用一般的伪类元素的兄弟姊妹组合,我们可以通过一个复选框或单选按钮来触发...

css3 滤镜效果

img src="/upimg/allimg/111227/0F9403033-0.jpg" alt="Nettuts+ Logo">   “请谨记:这些滤镜在WebKit浏览器的公共版.....

CSS3----透明滤镜效果

支持主流浏览器,--Firefox,Chrome,IE7/8/9---IE6目前不支持 HTML: /*80%的透明效果:*/ <img ...
  • damys
  • damys
  • 2013-05-03 16:11
  • 742
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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