滤镜效果
类似于美颜相机、美图秀秀这样的美颜工具,能够让我们轻松地应用多种特效,例如转换为黑白照片、复古风格化、调整亮度等。在之前仅凭CSS几乎很难做到这些效果。
但在CSS3的语法中,所有的这些视觉特效都是通过“filter”属性来快速实现的。
语法:
filter:none|方法;
filter属性值有以下10种,每一种都对应着一种滤镜效果。其中属性取值无效,那么会默认取值为none。除了特殊说明,属性取值如果是百分比值(如78%),那么该函数也接收小数(0.78)。
属性值 | 说明 |
---|---|
none | 表示不设置滤镜效果 |
brightness() | 亮度 |
grayscale() | 灰色 |
sepia() | 复古 |
invert() | 反色 |
hue-rotate() | 旋转(色相) |
drop-shadow() | 阴影 |
opacity() | 透明度 |
blur() | 模糊度 |
contrast() | 对比度 |
saturate() | 饱和度 |
亮度:brightness()
概念:brightness()方法用来实现减弱或增强图片的亮度。
语法:
filter:brightness(amount);
属性值
取值为0%时就是完全黑色,值为100%就表示图像无变化。如果值在0%到100%之间表示减弱图片的亮度,值大于100%以上就表示增强图片的亮度。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>明亮</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
width:230px;
height:230px;
margin:20px 20px;
}
.after{
filter:brightness(2);
}
</style>
</head>
<body>
<div class="before">
<h2>之前</h2>
<img src="../img/9.png" alt="">
</div>
<div class="after">
<h2>现在</h2>
<img src="../img/9.png" alt="">
</div>
</body>
</html>
运行结果
灰度:grayscale()
概念:grayscale()方法可以用于将图片转换为灰度图像(黑白图像)。灰度滤镜就是将彩色图片转换成黑白图片。
语法:
filter:grayscale(amount);
属性值
值为0%时表示图形无变化。当值为100%时则表示将图像完全转换为灰度图像(黑白图像)。值为0%到100%之间的值会增加图片灰度程度。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>灰度</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
width:230px;
height:230px;
margin:20px 20px;
}
.after{
filter:grayscale(100%);
}
</style>
</head>
<body>
<div class="before">
<h2>之前</h2>
<img src="../img/2.png" alt="">
</div>
<div class="after">
<h2>现在</h2>
<img src="../img/2.png" alt="">
</div>
</body>
</html>
运行结果
复古:sepia()
概念:sepia()方法用于实现将图像转换为深褐色。复古滤镜,也叫褐色滤镜。
语法:
filter:sepia(amount);
属性值
取值范围为0%~100%。其中,值为100%表示图像完全是深褐色的,值为0%时表示图像无变化。
如果值在0%到100%之间,值越大,变化就越增强。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复古</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
margin:20px 20px;
}
img{
width:400px;
height:350px;
}
.after{
filter:sepia(100%);
}
</style>
</head>
<body>
<div class="before">
<h2>之前</h2>
<img src="../img/a.jpg" alt="">
</div>
<div class="after">
<h2>现在</h2>
<img src="../img/a.jpg" alt="">
</div>
</body>
</html>
运行结果
反色:invert()
概念:invert()方法是用来实现反色滤镜效果的。反色,指的是红、绿、蓝3个通道的像素取各自的相反值。
语法:
filter:invert(amount);
属性值
取值范围是0%到100%。其中,值为0%表示图像无变化,但值为100%则表示图像完全反转所有颜色。如果值在0%到100%之间,值越大,反转程序就越高。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>反色</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
margin:20px 20px;
}
img{
width:400px;
height:350px;
}
.after img{
filter:invert(1);
}
</style>
</head>
<body>
<div class="before">
<h2>之前</h2>
<img src="../img/a.jpg" alt="">
</div>
<div class="after">
<h2>现在</h2>
<img src="../img/a.jpg" alt="">
</div>
</body>
</html>
运行结果
旋转:hue-rotate()
概念:hue-rotate()方法用来实现将应用色相旋转的滤镜效果。
语法:
filter:hue-rotate(angle);
属性值
angle值设定图像会被调整的色环角度值。angle值是一个度数,单位是deg(即“degree”)。其中,值为0deg表示不旋转,但值为360deg表示旋转360o,也就是相当于一个循环
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
margin:20px 20px;
}
img{
width:400px;
height:350px;
}
.after img{
filter:hue-rotate(240deg);
}
</style>
</head>
<body>
<div class="before">
<h2>之前</h2>
<img src="../img/a.jpg" alt="">
</div>
<div class="after">
<h2>现在</h2>
<img src="../img/a.jpg" alt="">
</div>
</body>
</html>
运行结果
阴影:drop-shadow()
概念:drop-shadow()方法用来给图像添加阴影效果。
语法:
filter:drop-shadow(x-offset y-offset blur color);
属性值
属性值 | 说明 |
---|---|
x-offset | 必选值,定义水平阴影的偏移距离,可以使用负值。由于是W3C坐标系,因此x-offset值为正时,向右偏移;取值为负时,向左偏移。 |
y-offset | 必选值,定义垂直阴影的偏移距离,可以使用负值。由于是W3C坐标系,因此y-offset值为正时,向下偏移;取值为负时,向上偏移。 |
blur | 可选值,定义阴影的模糊半径,只能为正值。值越大,阴影就越大,也越模糊。 |
color | 可选值,定义阴影的颜色。 |
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阴影</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
margin:20px 20px;
}
img{
width:400px;
height:350px;
}
.after img{
filter:drop-shadow(10px 10px 15px blue);
}
</style>
</head>
<body>
<div class="before">
<h2>之前</h2>
<img src="../img/a.jpg" alt="">
</div>
<div class="after">
<h2>现在</h2>
<img src="../img/a.jpg" alt="">
</div>
</body>
</html>
运行结果
透明度:opacity()
概念:opacity()方法用来给图像添加透明效果,也就是透明度滤镜效果。
语法:
filter:opacity(amount);
属性值
取值范围是0%~100%。其中,值为0%则是使图像完全透明,值为100%则是图像无变化。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>透明</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
margin:20px 20px;
}
img{
width:400px;
height:350px;
}
.after img{
filter:opacity(60%);
}
</style>
</head>
<body>
<div class="before">
<h2>之前</h2>
<img src="../img/a.jpg" alt="">
</div>
<div class="after">
<h2>现在</h2>
<img src="../img/a.jpg" alt="">
</div>
</body>
</html>
运行结果
模糊度:blur()
概念:blur()方法用来实现模糊度滤镜效果,将高斯模糊应用于输出图片,也就是马赛克。
语法:
filter:blur(amount);
属性值
amount的取值是一个像素值,单位是px,定义了高斯函数的标准偏差值,即屏幕上有多少像素相互融合;因此像素值越大,模糊效果会更加明显。值为0会使输入保持不变。该值为空则为0.
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模糊度</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
margin:20px 20px;
}
img{
width:400px;
height:350px;
}
.after img{
filter:blur(10px);
}
</style>
</head>
<body>
<div class="before">
<h2>之前</h2>
<img src="../img/a.jpg" alt="">
</div>
<div class="after">
<h2>现在</h2>
<img src="../img/a.jpg" alt="">
</div>
</body>
</html>
运行结果
对比度:contrast()
概念:contrast()方法用来调整输入图像的对比度。
语法:
filter:contrast(amount);
属性值
低于100%的值会降低对比度,高于100%的值会增加对比度。值为0%将创建完全灰色的图像,值为100%时不会有任何变化,值为200%时表示增强对比度为原先的2倍。该值为空时默认为1。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对比度</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
margin:20px 20px;
}
img{
width:400px;
height:350px;
}
.after img{
/* filter:contrast(200%); */
filter:contrast(3);
}
</style>
</head>
<body>
<div class="before">
<h2>之前</h2>
<img src="../img/a.jpg" alt="">
</div>
<div class="after">
<h2>现在</h2>
<img src="../img/a.jpg" alt="">
</div>
</body>
</html>
运行结果
饱和度:saturate()
概念:saturate()方法用于改变图像饱和度。
语法:
filter:saturate(amount);
属性值
低于100%的值会降低饱和度,高于100%的值会增加饱和度。值为0%则是完全不饱和,值为100%则表示图像无变化。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>饱和度</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
margin:20px 20px;
}
img{
width:400px;
height:350px;
}
.after img{
/* filter:saturate(50%); */
filter:saturate(300%);
}
</style>
</head>
<body>
<div class="before">
<h2>之前</h2>
<img src="../img/a.jpg" alt="">
</div>
<div class="after">
<h2>现在</h2>
<img src="../img/a.jpg" alt="">
</div>
</body>
</html>
运行结果
多种滤镜
概念:如果想要为元素同时定义多种滤镜效果,两个值之间要用空格隔开。滤镜效果将按声明顺序依次应用。
语法
filter:brightness() grayscale() blur().....;
注意:滤镜属性值没有规定要按一定的顺序去排序,可以乱序排列。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多种滤镜效果</title>
<style>
*{
padding:0;
margin:0;
}
div{
display:inline-block;
margin:20px 20px;
}
img{
width:400px;
height:350px;
}
.after img{
filter:opacity(0.5) blur(1px) sepia(0.3) drop-shadow(20px 10px 10px rgba(31,151,247,0.5));
}
</style>
</head>
<body>
<div class="before">
<h2>之前</h2>
<img src="../img/a.jpg" alt="">
</div>
<div class="after">
<h2>现在</h2>
<img src="../img/a.jpg" alt="">
</div>
</body>
</html>
运行结果