<!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. 使用Lazy对构造进行重构后比较

    用于测试在是否使用Lazy 的情况下,服务器负载,及服务提供情况对比.     服务器环境:   在此机器上安装了1 Hyper-V ,分配走1G内存,同时在本地上安装 SQLServer ,   在 ...

  2. Hadoop Hive概念学习系列之什么是Hive？

    参考  <Hadoop大数据分析与挖掘实战>的在线电子书阅读                   http://yuedu.baidu.com/ebook/d128cf8e33687e21 ...

  3. ARKit的使用

    //创建场景 let scene = SCNScene() /* //1.几何 let box = SCNBox.init(width: 0.1, height: 0.1, length: 0.1, ...

  4. 多线程 NSThread 的使用

    NSThread简介 使用NSThread 实现多线程,需要手动管理线程的生命周期, 一.线程的创建 //1.实例方法创建,,需要手动启动线程 NSThread *thread = [[NSThrea ...

  5. Android---16进制与字节数组

    16进制字符串与字节数组进行转换 package string; import java.util.Arrays; /** * byte[]与16进制字符串相互转换 * * @date:2017年4月 ...

  6. checkstyle 各标签 （有几个没翻译，不懂意思）

    以下是对checkstyle 7.8.1 version各标签的翻译,有少数几个标签没翻译,不太懂官网的意思,就空了,希望游客能帮忙补充补充,另外有错的话也希望大家留言下哈,另外转载的话请标明一下 1 ...

  7. linux系统编程之（一） 信号量

    信号量 一．什么是信号量 信号量的使用主要是用来保护共享资源,使得资源在一个时刻只有一个进程(线程)所拥有. 信号量的值为正的时候,说明它空闲.所测试的线程可以锁定而使用它.若为0,说明 它被占用,测 ...

  8. 转帖 最全的HTML、CSS知识点总结，浅显易懂

    一,html+css基础1-1Html和CSS的关系学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的:1. HTML是网页 ...

  9. DB Intro - MongoDB Relations

    https://www.quackit.com/mongodb/tutorial/mongodb_create_a_relationship.cfm

  10. Java中多线程并发体系知识点汇总

    一.多线程 1.操作系统有两个容易混淆的概念,进程和线程. 进程:一个计算机程序的运行实例,包含了需要执行的指令:有自己的独立地址空间,包含程序内容和数据:不同进程的地址空间是互相隔离的:进程拥有各种 ...