找不到背景图片

Question

我可能有点傻什么的，但我就是找不到该网站的背景图片：

谁能找到它或者告诉我如何轻松找到它？我现在已经使用 Chrome DevTools 和 Firebug 进行了搜索，并搜索了 GIF、JPG 和 PNG 的代码...:(

Answer 1

找到背景图片非常容易。以下是如何使用 Firebug 找到它的三种解决方案（它在 Chrome 和 Firefox DevTools 中的工作方式类似）：

通过CSS面板
1. 切换到CSS面板。
2. 在搜索字段中输入
```
jpg
```
  。
3. 将鼠标悬停在匹配的
```
url(...)
```
  上即可查看图像预览。
4. 如果不正确，请按 Enter 并重复步骤 3。
通过 HTML 面板
1. 右键单击背景图像，然后从上下文菜单中选择 使用 Firebug 检查元素，以在 HTML 面板中查看该元素。
2. 切换到Style侧面板。
3. 检查其中一条规则是否包含
```
background-image
```
  属性。
4. 如果没有包含相关图像的
```
background-image
```
  属性，则意味着包含该图像的元素被您刚刚检查的元素覆盖。因此，通过按所选元素上的 Del 或右键单击它并从上下文菜单中选择 Delete Element 来删除元素。然后重复步骤3。
通过Net面板
1. 启用并切换到Net面板。
2. 重新加载页面。
3. 单击图像过滤器。
4. 将鼠标悬停在列出的每张图像上即可找到您要搜索的图像。

Answer 2

设置背景图像有几种不同的方法，有些在 HTML 中，有些在 CSS 中。虽然最常见的情况是使用

background-image

CSS 属性。

在大多数情况下，覆盖整个页面的背景图像设置在

<body>

或

<html>

元素上。因此，您应该首先通过 DevTools 的 Elements / Inspector 面板检查这些内容。

如果它们不包含图像或图像仅覆盖页面的一部分，您应该按照以下步骤找出图像的位置：

右键单击图像并从上下文菜单中选择检查。这将打开 DevTools 并在 Elements / Inspector 面板中选择右键单击的元素。
检查检查的元素是否是包含搜索图像的图像元素（可能是
```
<img>
```
、
```
<picture>
```
或其他媒体元素）。
如果它不是图像元素或不是您要搜索的元素，请查看其 CSS 样式。检查其中一条规则是否包含
```
background-image
```
属性。
如果没有包含相关图像的
```
background-image
```
属性，则意味着包含该图像的元素被您刚刚检查的元素覆盖。因此，通过上下文菜单在所选元素上按 Del 来删除元素。
重复步骤1。

如果页面上的图像数量较少，您也可以在“网络”面板中搜索。为此，您应该首先按图像过滤，然后检查不同的图像请求。