喽大家好，我是胖达。本期视频来看看路径相关的内容。我们知道在网页中存在很多的图片，如果把这些图片和html文档放在一起，这样不光不美观，管理起来也非常不方便。通常会新建一个专门用来管理图像资源的文件夹，当需要查找图像的时候就会选择使用路径的方式来指定图像文件的位置。

路径的类型又分为两种，第一种是相对路径，第二种是绝对路径。今天先来了解一下相对路径。相对路径是相对于当前文件的位置来表示资源，也就是图片位置的路径表达方式。简单来说就是图片相对于当前html文档的位置。这里把相对路径的分类给大家列出来了，一个一个往下看。

·首先是同级路径。同级路径不需要在html里面写任何符号，只需要将文件名写到html属性里就可以了。在代码里看一下，这里有一个image，点jpg的图片和html文档处于同一级，所以在html的属性里直接写image，点jpg保存一下看看效果。

可以看到现在图片是正常展示的，同级路径下只需要在html属性里完整填写图像文件的名称就可以了。

·再来看第二个下级路径。当图像文件位于html文件下一集时，需要在html属性里完整填写同级文件夹的名称，然后斜杠写出对应图片文件的名称。

→首先打开资源文件夹，在这里新增一个images的文件夹。将image图片文件复制一份放到images文件夹里。

→打开vscode，新建一个gtml文档，这里新增一个image标签。

→在左侧资源管理器中刚刚新增的images文件夹已经显示出来了，打开以后会发现里面有一个image，点jpg的图片。把这个路径写一下，在src属性里面写入位于当前html文件同级的images文件夹的名称，使用符号斜杠找到image，点gpg，看一下效果。此时图片也完整显示出来了。

→如果在amager四文件夹里还有一个amager四文件夹，下级路径又该怎么写？在amager文件夹里再新建一个文件夹，打开vscod，在左侧的资源管理器中a major s文件夹下面又新增了一个a major s文件夹，在这里面又放了一张图片。

这张图片应该怎样让它展示出来？一起来看一下。

→首先找到同级的images文件夹，使用符号斜杠，此时vscode会提供给两个选项，一个是imagers文件夹，另一个是imager.gpg。选择imagers，imagers文件夹里面的imager.gpg的文件了，保存一下看看效果。

在浏览器中这两张图片都完美的展现出来了。

最后来看一下相对路径里面的。上级路径使用的符号是点点杠。上级路径又应该怎么理解？也就是图像文件是位于当前这个 hd ml文件的上一集。

在练习文件夹里新增一个名为 hd ml的文件夹，打开vs code，选择刚刚新增的文件夹，选择新建文件，这里需要新增一个 hd ml文档。在当前 hd ml文档中，如果想要调用上一级的 image 点 j p g 的图片应该怎么做？在 sr c 属性里面使用点点杠。

这里 vs code提供了上一集路径中存在的文件，选择 image 点 j p g，在浏览器中看下效果，此时图片也是正常显示的。如果hd ml文件藏得更深一些，把当前的文件复制一份，新增一个hd ml文件夹，将复制的文档粘贴一下，打开刚刚复制的文档，修改sr c属性里面的值，使用点点杠。

此时是没有找到 amage 点 j p g 的文件，这个时候就需要重复刚刚的操作，点点杠就能找到需要到的 amage 点 jbg 的文件了，保存一下看看效果。这里可以看到图片还是正常显示出来了。

本期视频主要了解了相对路径的三种分类，一个是同级路径，一个是下级路径，还有一个是上级路径。希望小伙伴们下来可以好好练习一下，这对于后期的内容非常重要。下期再来聊聊绝对路径。本期的内容到此结束，感谢观看，下期再见。

想给你的网站进行美化吗？一种方法是在你的WordPress页面上添加一个背景图片。毕竟背景图片是放在页面内容后面的图片或设计，以美化页面。如何给WordPress文章和页面添加背景图片？在WordPress网站上添加背景图片有不同的方法。

原文引用：给WordPress文章和页面添加背景图片图文教程 - 搬主题

在本图文教程中，搬主题将介绍三种很容易做到的方法。

一、为什么要在WordPress中添加背景图片

简单地说，它们美化了你的网站。相对于在整个网站上使用普通的背景，在你的网站背景上显示一个图像会增加一些美感和专业性。

在过去，人们试图保持他们的网站设计尽可能的简单。虽然这在当时很有效，但后来情况发生了变化。随着全球网站数量的增加，确保你在竞争中脱颖而出是很重要的。实现这一目标的方法之一是改善你的网站设计。使用背景图片就可以为你的WordPress网站做到这一点。

二、添加背景图片的弊端

正如一切有优点的事物一样，如果使用不当，也必然会有弊端。下面我们将讨论其中的一些问题。

首先，一些背景图片可能会出现在完全不合适的地方，并扰乱你的页面内容。这将导致用户错过你打算在你的页面上传递的信息。其次，不对移动端负责的背景图片可能会影响你网站的移动可用性。大多数用户从他们的移动设备访问互联网。出于这个原因，作为一个网站所有者，移动友好性应该是你最关心的问题。

最后，如果你使用的是大文件尺寸的图像，这可能会增加你网站的加载时间。因此，加载时间的增加会导致高跳出率，这反过来又会影响你的页面SEO。当然，你可以通过使用图像压缩插件或在上传到你的网站之前简单地在线压缩图像来避免这种情况。

三、如何在你的WordPress文章和页面上添加背景图片

有三种方法可以在WordPress网站上添加背景图片。那就是使用默认的主题选项、使用插件或使用自定义CSS代码。下面，我们将告诉你如何使用它们中的每一个。

1、默认主题选项

一些WordPress主题支持使用图片作为页面的背景。如果你的主题支持它，你可以在你的管理面板上的自定义页面启用它。首先登录到你的WordPress仪表板，然后进入外观>>自定义。这将会出现WordPress主题定制器页面。

在右边，你会看到你的网站的实时预览和最近的变化。左边的面板包含了你的主题所提供的各种自定义功能。要设置背景图片，请点击背景。

在 "背景"菜单上，你可以使用一个图像或颜色作为你的背景。要使用图像，请点击 "选择图像"按钮。

接下来，从你的WordPress媒体库中选择一张图片。要上传一个新的图像，选择 "上传文件 "标签。然后点击 "选择文件"，从你的电脑中选择图像。

将图像上传到你的网站后，点击选择图像按钮。

要改变图像的大小和显示，请点击 "预设 "下拉菜单并从可用的选项中选择。你可以测试每个选项，以确定哪个选项对你的图像效果最好。

在 "图像位置 "下，你可以选择你想要对齐图像的角度。当你完成了对图像的定制后，点击 "发布"来实现这些变化。你可以访问你网站上的任何一个页面，看看背景看起来如何。

默认主题背景选项的弊端

使用大多数主题提供的默认背景选项的弊端是它没有提供很大的灵活性和控制背景图片在你的页面上的外观。此外，背景图片是全局性的，适用于你整个网站的帖子和页面。因此，如果你想为其他页面和帖子使用不同的背景，你可能会发现这很困难。幸运的是，有了WordPress的添加背景图片的插件，你在为网站的任何部分或页面添加背景照片时，可以得到很大的控制和灵活性。

2、使用WordPress插件

如果你的主题设置中没有添加背景图片的选项，你可以使用一个插件来添加它。在本节中，我们将展示如何使用两个插件来做到这一点。

如何用Elementor在WordPress中添加背景图片

Elementor是WordPress最受欢迎的拖放式页面生成器插件之一。该插件有很多功能，让你使用交互式仪表盘建立一个完整的网站，而不需要写一行代码。

在这里，我们将使用背景功能为WordPress网站上的部分添加背景图片。要开始，你需要从你的WordPress仪表板上安装并激活Elementor插件。

这里可以从搬主题站点下载汉化中文版《Elementor Pro完美汉化中文版|页面拖动自定义设计WordPress插件介绍》

激活该插件后，你可以使用直观的仪表盘来编辑你的WordPress文章和页面。首先，进入页面>>所有页面，然后在你想修改的页面下面选择编辑。

在页面编辑器上，点击 "用Elementor编辑 "按钮，打开仪表板。Elementor仪表板有很多功能，可以帮助你编辑网站的任何部分。你可以在 "内容 "选项卡中添加文本、标题、图片、视频等。

假设我们想在你的页面上的某个部分添加一个背景图片，点击六点图标，突出整个部分，如下图所示。

在 "风格"选项卡上，点击背景下拉菜单。接下来，选择钢笔图标，然后点击选择图像。

现在从你的WordPress媒体库中选择一张图片或上传一张新图片。

添加背景叠加

在选择图像后，你可以添加一个背景覆盖，这样图像就不会扰乱你的内容。为此，点击背景叠加下拉菜单。

然后在 "颜色 "部分选择你要使用的颜色。

当你完成添加图像和效果后，点击更新按钮，保存你的变化。通过这种方法，你可以在网站的任何部分或页面添加无限的背景图片。只需选择页面，然后用Elementor插件编辑，添加你的背景图片。

Advanced WordPress Backgrounds(AWB)插件添加背景图片

另一个你可以用来在WordPress中添加背景图片的插件是Advanced WordPress Backgrounds插件。除了添加背景图片外，你还可以使用视频作为你的背景元素。这些视频可以来自你的媒体库、YouTube或Vimeo视频。

还有一些特殊的效果，你可以应用到你的图片上，如视差滚动效果。在这里，我们将专注于添加一个背景图片，但如果你想了解更多关于背景效果的信息，请查看我们关于在WordPress添加视差效果的详细指南。要开始，你需要在你的WordPress仪表板上安装和激活该插件。为此，进入插件>>新增。在搜索框中，输入 "advanced WordPress backgrounds"。接下来，点击立即安装按钮，在安装完成后激活该插件。

如何使用AWB插件

要使用这个插件，请进入页面>>所有页面。然后在你想添加背景的页面下面选择编辑。

在编辑器上，点击添加块图标，然后在搜索框中输入 "AWB"。当它出现时，选择背景（AWB）块。

接下来，在右侧选择你想添加的背景类型。你可以使用背景颜色、图像或视频。选择 "图像 "选项卡并点击选择图像。

之后，从你的媒体库中选择一张图片。

你可以分别使用 "尺寸 "和 "背景尺寸 "选项来改变图像和背景的大小。添加图片后，点击 "更新 "按钮，保存你的更改。如果你使用的是经典编辑器，导航到你想添加背景图片的页面或帖子。一旦到达那里，点击高级WordPress背景图标。

在 "常规 "选项卡上，点击背景类型下拉菜单，然后选择图像选项。

接下来，点击选择图像按钮，然后从你的WordPress媒体库中选择一个图像。

你也可以更新图像的大小和位置。如果你想添加一个覆盖层，点击 "覆盖颜色 "下面的 "选择颜色"。接下来，选择你想使用的颜色。

而现在，在自定义背景图片后，点击插入。

这将生成一个短码，并自动将其插入你的编辑器中。在这个简码中，你可以输入你希望在背景图片上显示的文字。一旦完成，点击 "发布/更新 "按钮就可以实现改变。现在你可以在你的网站上查看该页面，看看背景图片的样子。

3、使用CSS手动添加背景图片

如果你是技术控，你可以使用自定义CSS代码来为你的网页和文章添加自定义背景。使用自定义CSS可以让你对图像的外观和位置有很大的灵活性和控制。

使用CSS方法，有许多背景图片的位置可供选择。首先，我们可以创建一个全局性的CSS背景图片，它将显示在所有页面上。很像一些WordPress主题所提供的选项。另外，我们可以添加特定类别的背景图片，或者创建一个带有背景图片的CSS类。然后，你可以将该类应用于单个帖子和页面。