<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <img class="normal" src="fx.jpg" alt="">

    <img src="fx.jpg" alt="" class="filter1">

    <img src="fx.jpg" alt="" class="sepia">

    <img src="fx.jpg" alt="" class="saturate">

    <img src="fx.jpg" alt="" class="saturate300">

    <img src="fx.jpg" alt="" class="invert">

    <img src="fx.jpg" alt="" class="opacity">

    <img src="fx.jpg" alt="" class="brightness">

    <img src="fx.jpg" alt="" class="contrast">

    <img src="fx.jpg" alt="" class="blur">

    <img src="fx.jpg" alt="" class="drop-shadow">

</body>

</html>
img {

    max-width: 200px;

}

.filter1 {

    -webkit-filter: grayscale(1);

}

.sepia {

    -webkit-filter: sepia(1);

}

.saturate {

    -webkit-filter: saturate(0.5);

}

.saturate300 {

    -webkit-filter: saturate(3);

}

.invert {

    -webkit-filter: invert(1);

}

.opacity {

    -webkit-filter: opacity(.2);

}

.brightness {

    -webkit-filter: brightness(.5);

}

.contrast {

    -webkit-filter: contrast(2);

}

.blur {

    -webkit-filter: blur(3px);

}

.drop-shadow {

    -webkit-filter: drop-shadow(5px 5px 5px #ccc);

}

解释：

filter的一些属性目前只有webkit支持

filter: grayscale(1) 灰度
sepia 褐色
saturate 饱和度
hue-rotate 色相旋转
invert 反色
opacity 透明度
brightness 亮度
contrast 对比度
blur 模糊
drop-shadow 阴影

效果：

模糊：

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

-webkit-filter: blur(10px); /* Chrome, Opera */

-moz-filter: blur(10px);

-ms-filter: blur(10px);

filter: blur(10px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

iOS下：

-webkit-backdrop-filter

解释：

和filter属性值一样

css滤镜模糊效果filter和backdrop-filter的更多相关文章

  1. CSS滤镜模糊效果

    .blur { -webkit-filter: blur(6px); -moz-filter: blur(6px); -ms-filter: blur(6px); filter: blur(6px); ...

  2. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  3. CSS 滤镜技巧与细节

    本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 注意:ie不兼容 本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,话不多说,直接开车,语法如下: { ...

  4. WebRTC与CSS滤镜（CSS filter）

    我们知道了如何使用WebRTC打开摄像头,可以截取视频帧并且用canvas显示出来. 本文将滤镜与视频结合.给视频加上一层滤镜.主要使用到的是filter属性. canvas与滤镜 先来看filter ...

  5. Backdrop Filter

    CSS 滤镜 : backdrop-filter backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果. 滤镜: 名称: 方法案例: 效果: blur() 模糊 filte ...

  6. CSS 滤镜

    声明: web前端学习笔记,欢迎大神指点.联系QQ:1522025433. CSS样式表是一种为超文本标签语言提供增强补充服务的技术,可对每一个html的标签做精雕细刻的修饰.只用html制作的网页, ...

  7. CSS 滤镜（IE浏览器专属其他浏览器不支持）

    Filter 属性介绍: 设置或检索对象所应用的滤镜或滤镜集合.此属性仅作用于有布局的对象,如块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 positi ...

  8. 运用HTML5+CSS3和CSS滤镜做的精美的登录界面

    原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...

  9. 利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的

    接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...

随机推荐

  1. org.apache.storm.utils.NimbusLeaderNotFoundException: could not find leader nimbus from seed hosts["datanode9"]. Did you specify a valid of nimbus hosts for config nimbus.seeds?

    出现这个异常的原因主要是zookeeper没有正常工作引起的.可以在storm-conf-storm.yaml中设置 storm.zookeeper.servers: -"zookeeper ...

  2. 条目八《永不建立auto_ptr的容器》

    条目八<永不建立auto_ptr的容器> 重要的事说三次,永不建立auto_ptr的容器,永不建立auto_ptr的容器,永不建立auto_ptr的容器!!! 为什么? 实质是auto_p ...

  3. fork（）父子进程文件描述符的关系

    父子进程共享文件描述符:此说法,其实是父子进程共享 文件表项(父进程和子进程共享同一个file table entry) 由于子进程是父进程的拷贝,子进程会拷贝父进程的进程描述符中的文件描述符表,可以 ...

  4. Qt 学习之路 2（73）：Qt 线程相关类

    Home / Qt 学习之路 2 / Qt 学习之路 2(73):Qt 线程相关类 Qt 学习之路 2(73):Qt 线程相关类  豆子  2013年11月26日  Qt 学习之路 2  7条评论 希 ...

  5. json语法和使用

    一.JSON 概述: JavaScript Object Natation,是一种轻量级的数据交换技术规范. 二.使用流程: 在服务端将java对象转换为JSON,然后发送到浏览器,在浏览器上在讲JS ...

  6. nginx（二）-反向代理

    什么是反向代理? 我们看图说话,我们用电脑访问谷歌,由于防火墙的存在,我们并不能直接访问.需要借助VPN来实现.这就是一个简单的正向代理的例子.这里你能够发现,正向代理“代理”的是客户端,而且客户端是 ...

  7. vue $index,$key已经移除了

    之前可以这样: <ul id="example"> <li v-for="item in items"> {{$index}} {{$k ...

  8. 简单的html渲染模板引擎

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 让android系统中任意一个view变成进度条

    1.效果 2.进度条背景drawable文件 结束后可以恢复原背景. <?xml version="1.0" encoding="utf-8"?> ...

  10. 3---Django rest framework源码分析（3）----节流

    Django rest framework源码分析(3)----节流 目录 添加节流 自定义节流的方法  限制60s内只能访问3次 (1)API文件夹下面新建throttle.py,代码如下: # u ...