为图片添加景深效果

作者:江月迟迟

发表于:2024-12-10

字数统计:753 字

预计阅读3分钟

背景介绍

大家在平时浏览网页的时候有没有见过下面这样的效果呢？

我们看到，图片的近处是模糊的，而远处是清晰的，我们把这种效果称为景深。

CSS 中有一个属性可以支持元素的平移、旋转、缩放或倾斜。同时，CSS 中还有一个属性可以将模糊或颜色偏移等图形效果应用于元素。大家可以试着通过 MDN 或者其他方式查找哪些 CSS 属性可以满足上述需求。

通常，我们会在 CSS 中对需要应用上述效果的元素直接书写相应的属性值。但是，如何根据场景动态修改上述属性值也是日常业务中常见的需求。

本节挑战，我们为大家提供这样的场景，希望大家能通过 JS 的方式为图片动态添加景深效果。

准备步骤

开始答题前，你需要确保基础代码已下载。如果没有成功下载，请点击并打开右侧环境窗口，然后在终端中键入以下命令，下载页面的基础代码：

wget https://labfile.oss.aliyuncs.com/courses/9203/06.zip && unzip 06.zip && rm 06.zip && cd 06

具体操作参考下图：

接着，点击打开 06/index.html 文件，请根据提示补充代码。

测试效果

可通过如下步骤测试效果：

1. 右键 06/index.html，选择 Open with Live Server。
2. 点击右侧的 Web 服务。

具体操作参考下图：

上述操作会在浏览器中打开新的标签页，如下图所示，请点击 06 文件夹：

之后，你将看到如下效果（默认情况下，图片均是模糊的）：

挑战需求

1. 要求通过 JS 的方式动态为图片添加景深效果，不可以通过静态 CSS 代码的方式添加。
2. 源码中共有 6 张图片，需要对包含人物和人物身后枫叶林的 img 标签设置清晰效果，对人物与枫叶林之外的 img 标签应保持模糊效果。

要求规定

1. 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
2. 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
3. 不要篡改已提供的基础项目中的 id 和 class 等属性值及 DOM 结构，以免造成检测失败。

总通过次数: 961 | 总提交次数: 975 | 通过率: 98.6%

难度: 简单 标签: CSS3, Web 前端

题解

      // 请在这里编写代码，根据需求，使得图片达到景深效果
      document.getElementsByClassName('img1')[0].style.filter = 'blur(0px)'
      document.getElementsByClassName('img2')[0].style.filter = 'blur(0px)'