其默认值是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. Chrome浏览器控制网速的方法

  2. js下利用userData实现客户端保存表单数据

    对于多数网页制作的朋友,实现在客户端保存在网页表单上的信息,比较多的是采用Cookie技术来实现,这些功能例如:下拉列表框选择的选项,文本框输入的数据等. 事实上,我们可以利用微软DHTML默认行为中 ...

  3. 设置滑动TabBar的显示和隐藏

    代码如下: //设置滑动的判定范围 - (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint ...

  4. iOS-NSString值为Unicode格式(字符串编码转换成中文编码)

    + (NSString *)replaceUnicode:(NSString *)unicodeStr  {             NSString *tempStr1 = [unicodeStrs ...

  5. iOS推送证书上传(转)

    iOS 推送证书制作(JAVA/PHP) 在使用Java或者PHP制作iOS推送服务器的时候,需要自己从开发者网站上导出的aps_developer_identity证书和Apple Developm ...

  6. git推送远程仓库以及分支介绍

    1.介绍 我们要把本地仓库的项目推送到远程服务器,首先我们得有自己的服务器,一般我们选择码云和github,码云和github的操作差不多,今天我们再次介绍码云的使用 2.码云的使用 第一步:首先我们 ...

  7. MySQL初始化脚本mysql_install_db使用简介及选项参数

    mysql_install_db是一个默认放在.../mysql/scripts的一个初始化脚本. 该脚本可以在任何装有perl的操作系统上被使用,在5.6.8之前的版本,该脚本是一个shell脚本, ...

  8. go项目部署到linxu

    环境: 在mac上编译, 编译后上传到linux, 然后运行代码 go项目打包 一.直接部署到linux 1. 在mac上, 进入到项目目录, 执行以下命令, 进行编译: CGO_ENABLED=0 ...

  9. javascript DOM和DOM操作的四种基本方法

    在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...

  10. Source Insight快捷键

    常用使用技巧 按住"ctrl", 再用鼠标指向某个变量(或函数),点击一下,就能进入这个变量(或函数)的定义. 快捷键 "Alt + F12",可以让显示界面中 ...