我们看到，图片的近处是模糊的，而远处是清晰的，我们把这种效果称为景深。
元素的filter样式属性用于指定一个或多个滤镜效果，从而改变元素的外观。
blur()：模糊元素。参数值表示模糊程度，单位为像素。
brightness()：调整元素的亮度。参数值表示亮度的百分比。
contrast()：调整元素的对比度。参数值表示对比度的百分比。
grayscale()：将元素转换为灰度图像。参数值表示灰度的百分比。
hue-rotate()：调整元素的色相。参数值表示旋转角度，单位为度数。
invert()：反转元素的颜色。参数值表示反转的百分比。
opacity()：调整元素的不透明度。参数值表示不透明度的百分比。
saturate()：调整元素的饱和度。参数值表示饱和度的百分比。
sepia()：将元素转换为褐色图像。参数值表示褐色的百分比。
示例：
<html>
<head>
<META charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>为图片添加景深效果</title>
<link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/style06.css">
</head>
<body>
<header>
<div><img class="img1" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-1.png" title="枫叶林"></div>
<div><img class="img2" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-2.png" title="人物"></div>
<div><img class="img3" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-3.png"></div>
<div><img class="img4" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-4.png"></div>
<div><img class="img5" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-5.png"></div>
<div><img class="img6" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-6.png"></div>
</header>
<script>
// 请在这里编写代码，根据需求，使得图片达到景深效果
document.querySelector(".img1").style.filter="blur(0px)"
document.querySelector(".img2").style.filter="blur(0px)"
</script>
</body>
</html>
