请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。
0.前言
最近在用手机的过程中,发现苹果在非常多的地方都使用了模糊的效果。
高斯效果虽然炫酷,可是咱们身为前端人员,又该如何去模仿这个效果呢?
这时候我们就要说到 CSS 3 中的一个属性,**Filter **了。
1.Filter
CSS滤镜(filter):
提供的图形特效,像模糊,锐化或元素变色。
过滤器通常被用于调整图片,背景和边界的渲染。
Filter 的一些基础内容:
名称 | 说明 |
---|---|
初始值 | none |
适用元素 | 所有元素;在SVG,它适用于容器元素不包括def元素和所有图形元素 |
继承性 | 不继承 |
适用效果 | 视觉处理 |
增添版本 | CSS3 |
JS 语法 | object.style.WebkitFilter="grayscale(100%)" |
关于适用浏览器版本:
平时推荐大家还是用 Chrome 浏览器来查看效果吧。
除此之外,再补充一下在 MDN 上给出的兼容性说明。
出自之外,Filter
虽然在属性介绍中说明是不继承的,但是它其实和 Opacity
非常类似,都会导致子级发生问题。
这时候我们就要用到另外一个内容,Filter()
函数了。
但是,咱们还是循序渐进,先继续来看 Filter
吧。
在介绍了 Filter
的基础使用之后,我们接下来介绍一下它的属性。
属性名 | 属性介绍 | 填写方式 |
---|---|---|
none | 无效果 | 默认值 |
grayscale | 灰度 | 百分比 |
sepia | 褐色 | 百分比 |
saturate | 饱和度 | 百分比 |
hue-rotate | 色相旋转 | deg |
invert | 反色 | 百分比 |
opacity | 透明度 | 百分比 |
brightness | 亮度 | 百分比 |
contrast | 对比度 | 百分比 |
blur | 模糊 | px |
drop-shadow | 阴影 | h-shadow v-shadow blur spread color |
既然知道了都有哪些属性,那么我们接下来就来一起看看。
这些属性都是如何去使用的吧。
2.属性的书写
2.1 grayscale :灰度
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏 --> QQ:3206064928</title>
<style type="text/css">
div{
width: 467px;
height: 700px;
border: 1px solid #000;
margin: 0px auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
img{
width: 100%;
height: 100%;
}
div:hover{
-webkit-filter:grayscale(1);
}
h3{
margin: 0;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div>
![](IMG_3479.JPG)
</div>
<h3>
grayscale :灰度
</h3>
</body>
</html>
实现效果:
解释说明:
灰度会将我们的照片进行灰白处理,其实说白了就是由原本的彩色照片变成 黑白照片而已。
需要注意:
- 值为100%则完全转为灰度图像,值为0%图像无变化。
- 值在0%到100%之间,则是效果的线性乘子。
- 若未设置,W3C说值默认是0,但是实际测试应为 100%。
2.2 sepia : 褐色
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏 --> QQ:3206064928</title>
<style type="text/css">
div{
width: 467px;
height: 700px;
border: 1px solid #000;
margin: 0px auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
img{
width: 100%;
height: 100%;
}
div:hover{
-webkit-filter:sepia(1);
}
h3{
margin: 0;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div>
![](IMG_3479.JPG)
</div>
<h3>
sepia : 褐色
</h3>
</body>
</html>
实现效果:
解释说明:
sepia 是将图像转换为深褐色。
处理过后能实现一种类似于“老照片”的泛黄感觉。
除此之外,需要注意:
- 值为100%则完全是深褐色的,值为0%图像无变化。
- 值在0%到100%之间,则是效果的线性乘子。
- 若未设置,W3C说值默认是0,但是实际测试应为 100%。
2.3 saturate :饱和度
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏 --> QQ:3206064928</title>
<style type="text/css">
div{
width: 467px;
height: 700px;
border: 1px solid #000;
margin: 0px auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
img{
width: 100%;
height: 100%;
}
div:hover{
-webkit-filter:saturate(4);
}
h3{
margin: 0;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div>
![](IMG_3479.JPG)
</div>
<h3>
saturate :饱和度
</h3>
</body>
</html>
实现效果:
解释说明:
saturate 是用于转换图像饱和度。
虽然转换成 0 的话,看上去实现效果和“灰度”差不多。
但是饱和度是可以设置超过原本图片色彩的。
除此之外,需要注意:
- 值为0%则是完全不饱和,值为100%则图像无变化。
- 其他值,则是效果的线性乘子。
- 超过100%的值是允许的,则有更高的饱和度。
- 若值未设置,值默认是1。
2.4 hue-rotate :色相旋转
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏 --> QQ:3206064928</title>
<style type="text/css">
div{
width: 467px;
height: 700px;
border: 1px solid #000;
margin: 0px auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
img{
width: 100%;
height: 100%;
}
div:hover{
-webkit-filter:hue-rotate(90deg);
}
h3{
margin: 0;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div>
![](IMG_3479.JPG)
</div>
<h3>
hue-rotate :色相旋转
</h3>
</body>
</html>
实现效果:
解释说明:
hue-rotate 是给图像应用色相旋转。
数值设定图像会被调整的色环角度值。
注意:
- 值为0deg,则图像无变化。
- 若值未设置,默认值是0deg。
- 该值虽然没有最大值,超过360deg的值相当于又绕一圈。
2.5 invert :反色
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏 --> QQ:3206064928</title>
<style type="text/css">
div{
width: 467px;
height: 700px;
border: 1px solid #000;
margin: 0px auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
img{
width: 100%;
height: 100%;
}
div:hover{
-webkit-filter:invert(1);
}
h3{
margin: 0;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div>
![](IMG_3479.JPG)
</div>
<h3>
invert :反色
</h3>
</body>
</html>
实现效果:
解释说明:
invert 是反转输入图像。
就像我们照相机的底片一样。
注意:
- 100%的价值是完全反转。
- 值为0%则图像无变化。
- 值在0%和100%之间,则是效果的线性乘子。
- 若值未设置,值默认是0。
2.6 透明度
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏 --> QQ:3206064928</title>
<style type="text/css">
div{
width: 467px;
height: 700px;
border: 1px solid #000;
margin: 0px auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
img{
width: 100%;
height: 100%;
}
div:hover{
-webkit-filter:opacity(.2);
}
h3{
margin: 0;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div>
![](IMG_3479.JPG)
</div>
<h3>
opacity :透明度
</h3>
</body>
</html>
实现效果:
解释说明:
opacity 是转化图像的透明程度。
注意:
- 值为0%则是完全透明,值为100%则图像无变化。
- 值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。
- 若值未设置,值默认是1。
- 该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。
2.7 亮度
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏 --> QQ:3206064928</title>
<style type="text/css">
div{
width: 467px;
height: 700px;
border: 1px solid #000;
margin: 0px auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
img{
width: 100%;
height: 100%;
}
div:hover{
-webkit-filter:brightness(2);
}
h3{
margin: 0;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div>
![](IMG_3479.JPG)
</div>
<h3>
brightness :亮度
</h3>
</body>
</html>
实现效果:
解释说明:
brightness 是给图片应用一种线性乘法,使其看起来更亮或更暗。
注意:
- 如果值是0%,图像会全黑。值是100%,则图像无变化。
- 其他的值对应线性乘数效果。
- 值超过100%也是可以的,图像会比原来更亮。
- 如果没有设定值,默认是1。
2.8 contrast :对比度
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏 --> QQ:3206064928</title>
<style type="text/css">
div{
width: 467px;
height: 700px;
border: 1px solid #000;
margin: 0px auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
img{
width: 100%;
height: 100%;
}
div:hover{
-webkit-filter:contrast(2);
}
h3{
margin: 0;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div>
![](IMG_3479.JPG)
</div>
<h3>
contrast :对比度
</h3>
</body>
</html>
实现效果:
解释说明:
contrast 是调整图像的对比度。
注意:
- 值是0%的话,图像会全黑。
- 值是100%,图像不变。
- 值可以超过100%,意味着会运用更低的对比。
- 若没有设置值,默认是1。
2.9 blur :模糊
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏 --> QQ:3206064928</title>
<style type="text/css">
div{
width: 467px;
height: 700px;
border: 1px solid #000;
margin: 0px auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
img{
width: 100%;
height: 100%;
}
div:hover{
-webkit-filter:blur(2px);
}
h3{
margin: 0;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div>
![](IMG_3479.JPG)
</div>
<h3>
blur :模糊
</h3>
</body>
</html>
实现效果:
解释说明:
终于到重头戏了,模糊。
blur 是给图像设置高斯模糊。
"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;
注意:
- 如果没有设定值,则默认是0;
- 这个参数可设置css长度值,但不接受百分比值。
2.10 drop-shadow :阴影
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏 --> QQ:3206064928</title>
<style type="text/css">
div{
width: 467px;
height: 700px;
border: 1px solid #000;
margin: 0px auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
img{
width: 100%;
height: 100%;
}
div:hover{
-webkit-filter:drop-shadow(5px 5px 5px #ccc);
}
h3{
margin: 0;
text-align: center;
font-size: 40px;
}
</style>
</head>
<body>
<div>
![](IMG_3479.JPG)
</div>
<h3>
drop-shadow :阴影
</h3>
</body>
</html>
实现效果:
解释说明:
drop-shadow 是给图像设置一个阴影效果。
阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。
函数接受<shadow>(在CSS3背景中定义)类型的值,
除了"inset"关键字是不允许的。
该函数与已有的box-shadow box-shadow属性很相似;
不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。
在这里带着大家回顾一下之前 box-shadow 的属性说明:
- <offset-x> <offset-y> (必须)
- 这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.
如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>,会有模糊效果).
- 这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.
- <blur-radius> (可选)
- 这是第三个code><length>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利).
- <spread-radius> (可选)
- 这是第四个 <length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小).
注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。
- 这是第四个 <length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小).
- <color> (可选)
- 查看 <color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用colorcolor属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
2.11 URL :自定义 XML 文件
解释说明:
URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素.
引入方法:
.target { filter: url(#c1); }
.mydiv { filter: url(commonfilters.xml#large-blur) }
2.12 复合写法
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏 --> QQ:3206064928</title>
<style type="text/css">
div{
width: 467px;
height: 700px;
border: 1px solid #000;
margin: 0px auto;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
img{
width: 100%;
height: 100%;
}
div:hover{
-webkit-filter:contrast(175%) brightness(70%);
}
h3{
margin: 0;
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div>
![](IMG_3479.JPG)
</div>
<h3>
你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。
</h3>
</body>
</html>
实现效果:
解释说明:
你可以组合任意数量的函数来控制渲染。
例如同时去增强图像的对比度和亮度等等。
3. Filter () 函数
以下部分内容出自 W3Plus。
很多时候,只是希望元素的背景做效果调整,又不希望他会影响其他元素。
而且又没有backdrop-filter属性的情形之下,filter()就显得格外的重要。
在继续往下阅读之前,你要注意一点,filter()并不等于以前介绍过的filter属性。
简单的理解,一个是函数,一个是属性。那么我们今天要说的是filter()函数。
为了能更好的与filter属性区分,filter()函数接受两个参数:
filter(<url>, <filter-function-list>)
其中<url>是指一个图像,<filter-function-list>是一个过滤器。
这两者结合在一起将会返回一个处理过的新图像。
例如:
.element {
background: filter(url(path/to/img.jpg), blur(5px));
}
因此,你可以给图片使用过滤效果,然后填充到元素中,比如background-filter、background-opacity、background-blur等等。
注意:
- 规范中定义的过滤函数
- 和background-size属性一起使用会有Bug
- 支持动画
- 需要添加前缀:-webkit-filter()
值得一提的是,backdrop-filter和filter()可以使用CSS3 transition和animation实现一些圆滑的过度效果或动画,甚至还可以使用JavaScript。
4. 后记
终于写完了,用时 5 个小时。
其中查找资料就花费了大量的事件。
但是最后还是能够完成,发送给大家,同时也希望大家能够在未来用到的时候能够记得看过这篇文章。
好啦,我也要去吃饭啦,拜拜了您嘞!
本文作者 : 李鹏
QQ :3206064928
微信:lipeng_0524
欢迎骚扰。
本文请勿随意转载,作者保留法律追究权利。
网友评论
http://www.cnblogs.com/shytong/p/5166701.html