如何窃取网站背景图片

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 提供适合您旅程各个阶段的云产品。 立即开始使用 $200 免费积分!

注意:这应该仅用于正义的力量! 不要随意窃取他人的背景图片并在未经同意的情况下将其用于自己的网站!

许多网站都使用背景图片。 它们从 绝对、难以置信的糟糕简单而优雅 再到 简直令人鼓舞 不等。 由于创建这些图片的文件需要保存在公共目录中才能正常工作,因此任何人都可以访问它们。

这只是找到图片路径的问题。

很有可能背景图片会在 CSS 文件中的 body 选择器上设置。 所以第一步是要找到 CSS 文件的文件路径。 让我们以这个网站为例。 首先,查看源代码,并在 <head> 部分中查找对样式表的引用。

viewsource.png

在这种情况下,我把它做得非常容易,因为文件路径不是动态的。 整个路径都在那里。 这可能并不总是这样,通常 CSS 文件的文件路径是相对路径,因此它们可能看起来像这样:href=”../style.css”

../ 表示“向上返回一个目录级别”。 这意味着如果您正在查看 http://somesupercoolsite.com/blog/ - 样式表实际上位于 http://somesupercoolsite.com/style.css 而不是 http://somesupercoolsite.com/blog/style.css 同样,../../ 表示“向上返回两个目录级别”。

如果您看到只是一个前置 /,这意味着“向上返回到根目录”。 这意味着如果您正在查看 http://somesupercoolsite.com/way/awesome/dude/blog 并且标题中的样式表链接保持 href=”/style.css”,样式表实际上位于 http://somesupercoolsite.com/style.css。 明白了吗? 很好。

还要记住,网站可能使用多个样式表,您可能需要进行一些猜测和检查才能找到正确的样式表,但您可以使用一些演绎推理,并假设“main.css”可能比“print.css”更有可能。

获得 CSS 文件的 URL 路径后,在浏览器中导航到该路径。

cssfind.png

看看我们发现了什么! CSS 文件顶部的 body 选择器向我们展示了图片文件的相对路径。 所有关于相对路径的规则都适用于此处,因此请记住在构建最终的背景图片 URL 路径时考虑这些规则。 在这种情况下,没有 ../ 之类的内容,但它也没有以 http:// 开头。 这意味着路径“从当前位置继续”。 这很重要:**CSS 中引用的文件路径相对于 CSS 文件的位置,而不是您正在查看的 URL。**

您可能在想,本例中的背景图片引用应该位于 https://css-tricks.org.cn/images/stripe.png 但是您错了。 文件路径相对于 CSS 文件的位置,因此它实际上位于 https://css-tricks.org.cn/wp-content/themes/CSS-Tricks/images/stripe.png

就是这样!

现在您已经有了图片的完整文件路径,只需导航到该路径,您就可以将其保存为图片。 正如我在文章开头提到的,不要随意窃取他人的背景图片并使用它,尤其是在它真的很酷且独一无二的情况下。(不是条纹 =) - 您可以窃取我的条纹,我不在乎)但有很多背景只是您构建自己的背景的良好起点。