代码收藏家技术教程 2025-01-25

【Html.js——功能实现】为图片添加景深效果（蓝桥杯真题-2161）【合集】

目录😋

背景介绍

准备步骤

测试效果

挑战需求

要求规定

通关代码✔️

代码解析📑

一、HTML 部分

二、JavaScript部分

三、工作流程 ▶️

测试结果👍

背景介绍

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

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

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，选择 Open with Live Server。

点击右侧的 Web 服务。

具体操作参考下图：

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

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

请通过下述挑战要求，修改 03/index.html 文件，解决文本溢出的问题，最终达到如下效果：

挑战需求

请打开
06/index.html 文件，该文件中有一段代码需要你补充，为图片添加景深效果。

要求通过 JS 的方式动态为图片添加景深效果，不可以通过静态 CSS 代码的方式添加。

源码中共有 6 张图片，需要对包含人物和人物身后枫叶林的 img 标签设置清晰效果，对人物与枫叶林之外的 img 标签应保持模糊效果。

要求规定

请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。

满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。

不要篡改已提供的基础项目中的 id 和 class 等属性值及 DOM 结构，以免造成检测失败。

通关代码✔️

<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>
        // 获取所有的图片元素
        const images = document.querySelectorAll('img');

        // 为除了远处两张图片外的其他图片添加模糊效果
        images.forEach((image) => {
            if (image.classList.contains('img1') || image.classList.contains('img2')) {
                // img1 和 img2 保持清晰
                image.style.filter = 'blur(0px)';
            } 
        });
    </script>
</body>

</html>

代码解析📑

一、HTML 部分
//index.html
<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>
        // 获取所有的图片元素
        const images = document.querySelectorAll('img');

        // 为除了远处两张图片外的其他图片添加模糊效果
        images.forEach((image) => {
            if (image.classList.contains('img1') || image.classList.contains('img2')) {
                // img1 和 img2 保持清晰
                image.style.filter = 'blur(0px)';
            } 
        });
    </script>
</body>

</html>
详细解释：

<html>：这是 HTML 文档的根元素，所有的 HTML 内容都包含在其中。

<head>：包含文档的元数据。
<META charset="utf-8">：指定文档的字符编码为 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">：引入外部样式表，可能包含一些页面的基本样式。

<body>：包含页面的主要内容。
<header>：通常用作页面的头部区域。
<div><img class="img1" src="https://labfile.oss.aliyuncs.com/courses/9203/autumn-1.png" title="枫叶林"></div> 等：包含多个 div 元素，每个 div 元素内包含一个 img 元素。
img 元素：
class 属性：用于给元素添加类，方便通过 CSS 和 JavaScript 进行样式和操作，这里有 img1 到 img6 等不同的类，可能用于区分不同的图片。

src 属性：指定图片的来源。

title 属性：为图片提供一个提示信息，当鼠标悬停在图片上时会显示该信息。

二、JavaScript部分
// 获取所有的图片元素
const images = document.querySelectorAll('img');

// 为除了远处两张图片外的其他图片添加模糊效果
images.forEach((image) => {
    if (image.classList.contains('img1') || image.classList.contains('img2')) {
        // img1 和 img2 保持清晰
        image.style.filter = 'blur(0px)';
    } 
});
const images = document.querySelectorAll('img');：使用 document.querySelectorAll('img') 方法获取页面中所有的 img 元素，返回一个 NodeList 集合，存储在 images 变量中。

images.forEach((image) => {...})：使用 forEach 方法遍历 images 集合中的每个元素。
if (image.classList.contains('img1') || image.classList.contains('img2')) {...}：检查当前元素的类名是否包含 img1 或 img2。

image.style.filter = 'blur(0px)';：如果元素的类名是 img1 或 img2，将 filter 属性设置为 blur(0px)，表示不进行模糊处理，保持清晰。

三、工作流程 ▶️

页面加载时，根据 HTML 中的元素和元数据设置页面的基本结构和样式。

在 JavaScript 中，使用 document.querySelectorAll('img') 获取所有的图片元素。

遍历所有的图片元素，对于类名为 img1 或 img2 的元素，将其 filter 属性设置为 blur(0px)，使其保持清晰。