<!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. [USACO07DEC]泥水坑Mud Puddles BFS BZOJ 1627

    题目描述 Farmer John is leaving his house promptly at 6 AM for his daily milking of Bessie. However, the ...

  2. mac 配置charles

    从官网下载链接http://www.charlesproxy.com/download 附上注册码: Registered Name: https://zhile.io License Key: 48 ...

  3. python 连接数据库 pymysql模块的使用

    一 Python3连接MySQL 本文介绍Python3连接MySQL的第三方库--PyMySQL的基本使用. 1 PyMySQL介绍 PyMySQL 是在 Python3.x 版本中用于连接 MyS ...

  4. Android 单选按钮(RadioButton)和复选框(CheckBox)的使用

    1.RadioButton (1)介绍 (2)单选按钮点击事件的用法 (3)RadioButton与RadioGroup配合使用实现单选题功能 (4)xml布局及使用 <?xml version ...

  5. 康奈尔大学CFD课程

    先上链接:https://confluence.cornell.edu/display/SIMULATION/Home 如果不会FQ,可以去edx:https://courses.edx.org/co ...

  6. 使用Git向GitHub上上传代码

    参考:http://www.cnblogs.com/yxhblogs/p/6130995.html 如果遇到[git无法pull仓库refusing to merge unrelated histor ...

  7. HDU6333 莫队+组合数

    题目大意: 给定n m 在n个数中最多选择m个的所有方案 #include <bits/stdc++.h> using namespace std; #define INF 0x3f3f3 ...

  8. Oracle权限关于with admin option和with grant option的用法

    1.with admin option with admin option的意思是被授予该权限的用户有权将某个权限(如create any table)授予其他用户或角色,取消是不级联的. 如授予A系 ...

  9. 使用dd命令写iso文件到u盘

    1. 使用df -h查看挂载点 [seif@study ~]$ df -h 文件系统        容量  已用  可用 已用% 挂载点 udev            1.9G     0  1.9 ...

  10. aoj0121

    一.题意:类似于华容道,输入是8个数字,输入虽然是一行,但实际是以两行的方式操作的.0表示空位,别的相邻数字可移动到该位置上.求最少移动步骤得到指定的状态. 二.思路:这题可以用BFS来解决.因为在每 ...