其默认值是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. PAT 甲级 1039 Course List for Student (25 分)(字符串哈希,优先队列,没想到是哈希)*

    1039 Course List for Student (25 分)   Zhejiang University has 40000 students and provides 2500 cours ...

  2. Div 居中对齐(水平、垂直)

    一:水平居中对齐 ***********************************************************************************  示例图 代码 ...

  3. Golang 开发框架 gin 项目时笔记

    1.模板引入时报错: func main() { router := gin.Default() router.LoadHTMLGlob("templates/**/*") rou ...

  4. Oracle系统表整理+常用SQL语句收集(转载)

    原文:https://www.cnblogs.com/jiangxinnju/p/5840420.html-- DBA/ALL/USER/V_$/GV_$/SESSION/INDEX开头的绝大部分都是 ...

  5. 调用API修改Ocelot的配置文件

    Ocelot是一个基于.net core的开源webapi服务网关开源项目,功能比较强大,Github项目地址为:https://github.com/ThreeMammals/Ocelot,关于Oc ...

  6. 关于opencv的几个小总结

    关于opencv的几个小总结 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:opencv是一个非常好用的开源图像处理与计算机视觉支持库,但是在实际使用 ...

  7. 最新 找钢网java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.找钢网等10家互联网公司的校招Offer,因为某些自身原因最终选择了找钢网.6.7月主要是做系统复习.项目复盘.LeetCo ...

  8. vue中的$attrs属性和inheritAttrs属性

    一.vue中,默认情况下,调用组件时,传入一些没有在props中定义的属性,会把这些“非法”属性渲染在组件的根元素上(有一些属性除外),而这些“非法”的属性会记录在$attrs属性上. 二.如何控制不 ...

  9. linux 环境下jmeter+ant+jenkins

    一.linux下的jenkins的安装: 下载链接:https://pan.baidu.com/s/1qZItZOC 密码:58da Jenkins 下载网址: http://jenkins-ci.o ...

  10. nginx 工作原理总结

    1.  Nginx的模块与工作原理 Nginx由内核和模块组成,其中,内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过查找配置文件将客户端请求映射到一个location block(locat ...