css3 filter(滤镜)属性汇总与使用介绍,来源W3C
实例
修改所有图片的颜色为黑白 (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的更多相关文章
- 巧用 CSS3 filter(滤镜) 属性
原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...
- CSS3 filter(滤镜) 属性
filter 属性定义了元素(通常是<img>)的可视效果 语法: object.style.WebkitFilter="grayscale(100%)" 小栗子: 修 ...
- css3中强大的filter(滤镜)属性
CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...
- 关于CSS3的filter(滤镜) 属性
修改所有图片或者元素的颜色为黑白 (100% 灰度) DOM{ -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: ...
- filter(滤镜) 属性 内部资料 请勿转载 谢谢合作
Filter 描述 none 默认值,没有效果. blur(px) 给图像设置高斯模糊."radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊 ...
- CSS3 filter(滤镜)
filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). Filter 函数 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.7 ...
- CSS3 filter滤镜
其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选: grayscale灰度 sepia褐色(求专业指点翻译) saturate饱和度 hue-rotate色相旋 ...
- filter: grayscale(100%)滤镜属性
效果图: filter滤镜属性
- CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...
随机推荐
- Linux - 查看并修改当前的系统时间
转载自Linux系统查看当前时间的命令 查看和修改Linux的时区 查看当前时区 命令 : date -R 修改设置Linux服务器时区 方法 A 命令 : tzselect 方法 B 仅限于RedH ...
- ie img 3px bug
ie img 3px bug 日期:2008-11-22 分类:CSS ie img 有 3px 的缝隙也是 ie 的经典 bug 之一,相信已经不陌生了,但还是先看看效果吧(也许你并没有见过): 效 ...
- JSP | 基础 | 中文字符的传递
设置传递格式: request.setCharacterEncoding("utf-8"); 中文字符解码: import java.net.URLDecoder; String ...
- java小游戏——猜数字
import java.util.ArrayList; import java.util.List; import java.util.Random; public class Num01 { sta ...
- 1-26HashSet简介
Set的特点 Set里面存储的元素不能重复,没有索引,存取顺序不一致. package com.monkey1024.set; import java.util.HashSet; /** * Set的 ...
- 轻松把玩HttpClient之配置ssl,采用绕过证书验证实现https
上篇文章说道httpclient不能直接访问https的资源,这次就来模拟一下环境,然后配置https测试一下.在前面的文章中,分享了一篇自己生成并在tomcat中配置ssl的文章<Tomcat ...
- Android 流量测试方法
流量测试怎么测?下面总结了几个方法: 一.通过pid获取流量 > 1.获取应用的pid adb shell ps | grep packagename 2.通过pid获取该进程的流量信息 adb ...
- bootstrap警告框、进度条和列表组
警告框 <div class="container"> <div class="alert alert-success" rol ...
- C++拾遗(四)——顺序容器
之前一篇博文(<初窥标准库>)简单了解了一种最常用的顺序容器:vector类型.本文将对该文内容进行进一步的学习和完善,继续讨论标准库提供的顺序容器类型.所谓顺序容器,即将单一类型的元素聚 ...
- sysdig安装和使用介绍
安装步骤1)安装资源库rpm --import https://s3.amazonaws.com/download.draios.com/DRAIOS-GPG-KEY.publiccurl -s -o ...