其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:

  1. grayscale灰度
  2. sepia褐色(求专业指点翻译)
  3. saturate饱和度
  4. hue-rotate色相旋转
  5. invert反色
  6. opacity透明度
  7. brightness亮度
  8. contrast对比度
  9. blur模糊
  10. drop-shadow阴影

模糊实例

图片使用高斯模糊效果:

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);
}

使图片变亮:

img {
    -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
    filter: brightness(200%);
}
.........

CSS3 filter滤镜的更多相关文章

  1. 巧用 CSS3 filter(滤镜) 属性

    原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...

  2. CSS3 filter(滤镜)

    filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). Filter 函数 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.7 ...

  3. css3 filter(滤镜)属性汇总与使用介绍,来源W3C

    实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(%); /* Chrome, Safari, Opera */ filter: g ...

  4. CSS3 filter(滤镜) 属性

    filter 属性定义了元素(通常是<img>)的可视效果 语法: object.style.WebkitFilter="grayscale(100%)" 小栗子: 修 ...

  5. CSS3 filter:drop-shadow滤镜与box-shadow区别应用 抄的

    CSS3 filter:drop-shadow滤镜与box-shadow区别应用 这篇文章发布于 2016年05月18日,星期三,01:07,归类于 css相关. 阅读 5777 次, 今日 12 次 ...

  6. css3中强大的filter(滤镜)属性

    CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...

  7. CSS3 filter 模糊滤镜的应用

    CSS3 filter 模糊滤镜的应用   在segmentfault上回答过的一个问题,如何将网页CSS背景图高斯模糊且全屏显示当时没有深入了解,只觉得滤镜应该只是应用于图片上的.而且各大网站的de ...

  8. CSS3的滤镜filter属性

    css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...

  9. CSS3 Filter详解(改变模糊度 亮度 透明度等方法)

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...

随机推荐

  1. python安装pip方法

    1.先下载pip安装脚本: https://bootstrap.pypa.io/get-pip.py 2.执行python get-pip.py 3.安装完成.

  2. jQuery插件—获取URL参数

    做的项目中需要用到通过JS获取GET参数,上网找了一下,找到如下插件: 例如 当前你的URL是: http://www.xxx.com/index.php?test=1&kk=2 //如果想获 ...

  3. React中如何实现模态框每次打开都是初始界面

    问题描述如下 解决方案:每次点击打开模态框的时候为,当前模态框设置一个独立的key值,代码如下: /* * 上传文件的模块框控制 * */ showFileModal = () => { thi ...

  4. EXCEL中,在其中列 前面or后面加一个“元”字的技巧

    EXCEL小技巧,我们平常需要用到一些,记录下,供有需要的人参考! 案例: EXCEL其中的一列,每个后面加一个“元”字,如果要1个1个去加,相当麻烦,其实很简单,只需要一个公式即可! 解决方法: ( ...

  5. 浅出讲解:php的socket通信

    原文地址:https://www.cnblogs.com/aipiaoborensheng/p/6708963.html 对TCP/IP.UDP.Socket编程这些词你不会很陌生吧?随着网络技术的发 ...

  6. 斑马打印机ZT610有线IP地址设置

    设定完毕IP地址后,将协议改为永久,并复位网络!设置完毕,复位网络!设置完毕,复位网络!设置完毕,复位网络!  不复位网络,设置无效!

  7. Spring Maven工程引入css,js

    1.CSS <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="t ...

  8. 微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案

    在页面中调用wx.getSystemInfo即可获取当前页面的屏幕高度,如果写在app.js里面或者带有系统tab页面里面,获取的windowHeight会比不是tab的页面少48: 含有的TabBa ...

  9. selenium + python 环境配置 (四)之启动Firefox

    火狐浏览器自身适配selenium   因此不需要再安装 直接代码启动: __author__ = 'admin' #作者 # -*- coding:utf-8 -*- # 建议所有都加编码 from ...

  10. [转帖]详解Linux系统inode原理--硬链接、软链接、innodb大小和划分等

    详解Linux系统inode原理--硬链接.软链接.innodb大小和划分等 原创 波波说运维 2019-07-17 00:03:00 https://www.toutiao.com/i6713116 ...