图像中的景深

介绍

在这个项目中，你将学习如何使用 JavaScript 动态地为图像应用景深效果。景深效果是摄影和网页设计中一种流行的视觉技术，在这种技术中，图像的前景模糊而背景保持清晰。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何使用 JavaScript 动态选择和操作图像
• 如何对特定图像应用模糊效果以创建景深
• 如何使用 JavaScript 修改 HTML 元素的 CSS 属性

🏆 成果

完成这个项目后，你将能够：

• 使用 JavaScript 为图像应用景深效果
• 理解文档对象模型（DOM）的重要性以及如何使用 JavaScript 与它进行交互
• 解释景深的概念以及如何使用它来增强网页的视觉吸引力

设置项目结构

你在浏览网页时，有没有见过如下效果？

我们可以看到，图像的前景模糊，而背景清晰。我们将这种效果称为「景深」。

在开始实现上述效果之前，打开实验环境，其目录结构如下：

├── images
├── index.html
└── style.css

• images 是存放图像的文件夹。
• index.html 是主页。
• style.css 是样式文件。

点击 WebIDE 右下角的「实时运行」按钮来运行项目。

接下来，在虚拟机顶部打开「Web 8080」并手动刷新，你将看到页面。

然后，你会看到如下效果（默认情况下，所有图像都是模糊的）：

为图像添加景深效果

在这一步中，你将学习如何使用 JavaScript 动态地为图像添加景深效果。

1. 在代码编辑器中打开 index.html 文件。
2. 在 HTML 文件底部找到 <script> 部分。
3. 在 <script> 部分内，添加以下代码以将景深效果应用于图像：

document.querySelector(".img1").style.filter = "blur(0px)";
document.querySelector(".img2").style.filter = "blur(0px)";

这段代码去除了人物和枫树林图像的模糊效果，使其变得清晰。

4. 保存 index.html 文件并刷新页面。现在你应该能看到景深效果已应用于图像，人物和枫树林清晰，而其他图像则是模糊的。

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。