实例

修改所有图片的颜色为黑白 (100% 灰度):

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

定义和使用

filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 使用空格分隔多个滤镜。


Filter 函数

注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。

模糊实例

图片使用高斯模糊效果:

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

Brightness 函数实例

使图片变亮:

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

Contrast 函数实例

调整图像的对比度:

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

drop-shadow 函数实例

给图像设置一个阴影效果:

img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}

Grayscale 函数实例

将图像转换为灰度图像:

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

hue-rotate() 函数实例

给图像应用色相旋转:

img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
filter: hue-rotate(90deg);
}

Invert 函数实例

反转输入图像:

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

Opacity 函数实例

转化图像的透明程度:

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

Saturate 函数实例

转换图像饱和度:

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

Sepia 函数实例

将图像转换为深褐色:

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

复合函数

使用多个滤镜,每个滤镜使用空格分隔。

注意: 顺序是非常重要的 (例如使用 grayscale() 后再使用 sepia()将产生一个完整的灰度图片)。

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

所有滤镜实例

以下实例演示了所有滤镜的使用方法:

.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
} .brightness {
-webkit-filter: brightness(0.30);
filter: brightness(0.30);
} .contrast {
-webkit-filter: contrast(%);
filter: contrast(%);
} .grayscale {
-webkit-filter: grayscale(%);
filter: grayscale(%);
} .huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
} .invert {
-webkit-filter: invert(%);
filter: invert(%);
} .opacity {
-webkit-filter: opacity(%);
filter: opacity(%);
} .saturate {
-webkit-filter: saturate();
filter: saturate();
} .sepia {
-webkit-filter: sepia(%);
filter: sepia(%);
} .shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}

链接:http://www.runoob.com/cssref/css3-pr-filter.html

链接:http://www.runoob.com/try/try.php?filename=trycss3_filter_all

css3 filter(滤镜)属性汇总与使用介绍,来源W3C的更多相关文章

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

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

  2. CSS3 filter(滤镜) 属性

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

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

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

  4. 关于CSS3的filter(滤镜) 属性

    修改所有图片或者元素的颜色为黑白 (100% 灰度) DOM{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: ...

  5. filter(滤镜) 属性 内部资料 请勿转载 谢谢合作

    Filter 描述 none 默认值,没有效果. blur(px) 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊 ...

  6. CSS3 filter(滤镜)

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

  7. CSS3 filter滤镜

    其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选: grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色相旋 ...

  8. filter: grayscale(100%)滤镜属性

    效果图: filter滤镜属性

  9. CSS3的滤镜filter属性

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

随机推荐

  1. Linux - 查看并修改当前的系统时间

    转载自Linux系统查看当前时间的命令 查看和修改Linux的时区 查看当前时区 命令 : date -R 修改设置Linux服务器时区 方法 A 命令 : tzselect 方法 B 仅限于RedH ...

  2. ie img 3px bug

    ie img 3px bug 日期:2008-11-22 分类:CSS ie img 有 3px 的缝隙也是 ie 的经典 bug 之一,相信已经不陌生了,但还是先看看效果吧(也许你并没有见过): 效 ...

  3. JSP | 基础 | 中文字符的传递

    设置传递格式: request.setCharacterEncoding("utf-8"); 中文字符解码: import java.net.URLDecoder; String ...

  4. java小游戏——猜数字

    import java.util.ArrayList; import java.util.List; import java.util.Random; public class Num01 { sta ...

  5. 1-26HashSet简介

    Set的特点 Set里面存储的元素不能重复,没有索引,存取顺序不一致. package com.monkey1024.set; import java.util.HashSet; /** * Set的 ...

  6. 轻松把玩HttpClient之配置ssl,采用绕过证书验证实现https

    上篇文章说道httpclient不能直接访问https的资源,这次就来模拟一下环境,然后配置https测试一下.在前面的文章中,分享了一篇自己生成并在tomcat中配置ssl的文章<Tomcat ...

  7. Android 流量测试方法

    流量测试怎么测?下面总结了几个方法: 一.通过pid获取流量 > 1.获取应用的pid adb shell ps | grep packagename 2.通过pid获取该进程的流量信息 adb ...

  8. bootstrap警告框、进度条和列表组

    警告框   <div class="container">      <div class="alert alert-success" rol ...

  9. C++拾遗(四)——顺序容器

    之前一篇博文(<初窥标准库>)简单了解了一种最常用的顺序容器:vector类型.本文将对该文内容进行进一步的学习和完善,继续讨论标准库提供的顺序容器类型.所谓顺序容器,即将单一类型的元素聚 ...

  10. sysdig安装和使用介绍

    安装步骤1)安装资源库rpm --import https://s3.amazonaws.com/download.draios.com/DRAIOS-GPG-KEY.publiccurl -s -o ...