<!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. CBoard 看板参数管理

    看板设计采用简单Row+Column布局模式,每行总长度为12,每列对应一个图表,行高度可以调节,列高度集成行高 左边栏看板分类中,我的看板为当前用户创建的看板,普通看板分类通过分类管理维护,保存看板 ...

  2. 洛谷 P1546 最短网络 Agri-Net（最小生成树）

    嗯... 题目链接:https://www.luogu.org/problemnew/show/P1546 首先不难看出这道题的思想是用了最小生成树,但是这道题有难点: 1.读题读不明白 2.不会读入 ...

  3. P2057 [SHOI2007]善意的投票 (最大流)

    题目 P2057 [SHOI2007]善意的投票 解析 网络流的建模都如此巧妙. 我们把同意的意见看做源点\(s\),不同意的意见看做汇点\(t\). 那我们\(s\)连向所有同意的人,\(t\)连向 ...

  4. bootstrap的其他

    情境文本颜色 <p class="text-muted">...</p> <p class="text-primary">. ...

  5. python语法学习面向对象之继承

    python语法学习面向对象之继承 转载自:http://www.cnblogs.com/Joans/archive/2012/11/09/2757368.html 只要涉及到面向对象,”类“是必须出 ...

  6. Macaca，Maven，MVC框架

    Macaca:Macaca是阿里开源的一套完整的自动化测试解决方案.同时支持PC和移动端测试,支持的语言有JS,Java,Python. Maven:java,Maven项目对象模型(POM),可以通 ...

  7. day--38 mysql表的完整性约束总结

    表的简单查询参考:https://www.cnblogs.com/clschao/articles/9995531.html 一:单表的查询: 查询数据的本质:mysql会去本地的硬盘上面找到对应的文 ...

  8. C++_类继承3-动态联编和静态联编

    程序调用函数时,将使用哪个可执行代码块呢?编译器负责回答这个问题. 将源代码中的函数调用解释为特定的函数代码块被称为函数名联编(binding). 在C语言中,这非常简单,因为每个函数名对应一个不同的 ...

  9. Loj 6433. 「PKUSC2018」最大前缀和 （状压dp）

    题面 Loj 题解 感觉挺难的啊- 状压\(dp\) 首先,有一个性质 对于一个序列的最大前缀和\(\sum_{i=1}^{p} A[i]\) 显然对于每个\(\sum_{i=p+1}^{x}A[i] ...

  10. ibaits数组形式批量入库

    一.xml层 <!--批量入库--> <insert id="addSecCodeList" parameterClass="java.util.Has ...