一、CSS3的滤镜(Filters)
CSS3滤镜是对图像等图形元素执行视觉效果操作,如模糊,平衡对比度或亮度,色彩饱和度等。
可以使用CSS3 filter属性将滤镜效果应用于元素,该属性按提供的顺序接受一个或多个滤镜功能。主要适用于不熟练掌握Photoshop技术的人员。
警告:任何版本的Internet Explorer当前均不支持CSS3滤镜效果。较旧的IE版本支持非标准filter属性来创建诸如不透明度之类的效果,但是该功能已被弃用。
1、模糊效果
像高斯模糊效果这样的Photoshop可以使用该blur()功能应用于元素。此函数接受CSS长度值作为定义模糊半径的参数。较大的值将产生更多的模糊。如果未提供参数,则使用值0。
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3滤镜</title>
</head>
<style>
img{
filter: blur(5px);
}
</style>
<body>
<img src="./8.png" alt="">
</body>
</html>
如图:
2、设置图像亮度
brightness()功能可用于设置图像的亮度。值0%将创建全黑的图像。而值100%或1使图像不变。还可以将亮度设置为高于100%,这样可以使图像更亮。如果未提供参数,则使用值1。不允许使用负值。
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3滤镜</title>
</head>
<style>
img{
filter: brightness(200%);
}