<!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. SDUT OJ 数据结构实验之链表四：有序链表的归并

    数据结构实验之链表四:有序链表的归并 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Desc ...

  2. Freeman链码

    [简介] 链码(又称为freeman码)是用曲线起始点的坐标和边界点方向代码来描述曲线或边界的方法,常被用来在图像处理.计算机图形学.模式识别等领域中表示曲线和区域边界.它是一种边界的编码表示法,用边 ...

  3. Vue keep-alive 组件.

    如果不用 webpack , 那么 name 就是 vue.component(name) 这个 name 就是 export default { name:"index"} 的那 ...

  4. RabbitMQ 在Linux环境中的默认位置

    参考:https://www.rabbitmq.com/relocate.html

  5. [一首诗] Life and Death 生与死

    Life and Death 生与死 I strove with none, 我和谁都不争, for none was worth my strife, 和谁争我都不屑: Nature I loved ...

  6. 关于去掉输入一定数字n，在n后写入n个字符串的问题

    在输入数字n后要用一个getchar 去吃掉数字n后面跟着的回车符号,从而保证输入的字符串数是和n是保持一致的 具体实例代码如下: #include<stdio.h> #include&l ...

  7. C# 调用键盘

    首先我们说的键盘指的是:tabtip和osk.但这两个所在的位置不同,样貌也不一样 C:\Windows\System32\osk.exe C:\Program Files\Common Files\ ...

  8. MBR为什么不支持3T硬盘

    MBR,全称为Master Boot Record,即硬盘的主引导记录.(是管理硬盘分区的一种模式.升级版是GPT) MBR保存在硬盘的第1个扇区(即硬盘的0柱面.0磁头.1扇区).它由三个部分组成, ...

  9. 微信获取用户信息的两个接口和两个ACCESS_TOKEN

    有一段时间没有搞微信开发了 ,今天突然要改一下程序! 回头一看 微信的帮助文档太tm的稀烂的,太难懂了,这做个笔记以后看着方便 微信有2个ACCESS_TOKEN, 1,基础接口的token 获取接口 ...

  10. 坐标&接龙型动态规划 - 20181026

    109. Triangle 此题还可以用DFS,记忆化搜索去做,二刷实现 public class Solution { /** * @param triangle: a list of lists ...