注意:这应该仅用于正义的力量! 不要随意窃取他人的背景图片并在未经同意的情况下将其用于自己的网站!
许多网站都使用背景图片。 它们从 绝对、难以置信的糟糕 到 简单而优雅 再到 简直令人鼓舞 不等。 由于创建这些图片的文件需要保存在公共目录中才能正常工作,因此任何人都可以访问它们。
这只是找到图片路径的问题。
很有可能背景图片会在 CSS 文件中的 body 选择器上设置。 所以第一步是要找到 CSS 文件的文件路径。 让我们以这个网站为例。 首先,查看源代码,并在 <head> 部分中查找对样式表的引用。
在这种情况下,我把它做得非常容易,因为文件路径不是动态的。 整个路径都在那里。 这可能并不总是这样,通常 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 路径后,在浏览器中导航到该路径。
看看我们发现了什么! 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
就是这样!
现在您已经有了图片的完整文件路径,只需导航到该路径,您就可以将其保存为图片。 正如我在文章开头提到的,不要随意窃取他人的背景图片并使用它,尤其是在它真的很酷且独一无二的情况下。(不是条纹 =) - 您可以窃取我的条纹,我不在乎)但有很多背景只是您构建自己的背景的良好起点。
我不会窃取图片,但我确实喜欢使用 Firefox Web Developer 插件来查看各种 CSS 技巧是如何工作的。 检查背景图片是其中一种方法。 该插件上的图片菜单有一个“查看图片信息”选项,它基本上会以列表形式显示网站所有图片的路径。
我同意 Douglas 的观点,你不应该窃取图片,创建自己的图片并不难。 另外,像 squidfingers 或 Stripe Generator 这样的地方,要么允许您下载现有的图片,要么创建自己的图片。
话虽如此,如果您安装了 Web Developer 工具栏,您只需右键单击要查看的背景图片并选择“查看背景图片”,它就会在当前窗口中打开。 这在大多数情况下都有效,除了当您遇到多个图片在单个内容周围的多个 div 中时,例如为了获得圆角和灵活的宽度和/或高度。
但是为什么呢? 呵呵……我的意思是……
我通常只会这样做来窃取……呃……查看代码(php、js、css 等):)
我建议不要窃取图片。 但如果您对背景图片感兴趣,一个快速的方法是使用 Firefox,右键单击背景区域,选择“查看背景图片”。
@chris:这只是一些人可能不知道的小技巧,仅此而已。 我同意,查看他人的代码以查找他们 javascript 的链接很有趣,这样您就可以看到都在使用什么。 但是 PHP 呢? 我希望如此。 这些都是服务器端的,因此实际上无法偷窥这些内容。 还记得 Facebook 主页的 PHP 泄露事件吗?
我个人知道这一点。 作为一个 CSS 程序员,你只是知道它;)。 我从来没有做过这件事,因为我从来不想窃取他人的作品。
是的,但请记住,他们可能将源代码保存为 .phps 文件。
“额外 -> 站点信息 -> 媒体”怎么样? ;)
窃取是错误的!
您也可以使用 Safari 的“活动”窗口。 它会向您显示页面使用的所有文件,包括图片、js 等。
我同意 Nick La 的观点 - 在 Firefox 中右键单击比这里描述的技术要容易得多。 但你为什么要窃取图片呢? 任何有自尊心的设计师都不会如此不诚实地使用别人的作品。
我同意,任何有自尊心的设计师都不会直接窃取这样的图片并将其冒充为自己的作品。 但是,有自尊心的设计师总是喜欢查看引擎盖下的东西,看看其他网站是如何构建的。 这就是重点。 获取您喜欢的背景图片,将其用作您自己设计的起点。
../../ 不是返回两个目录,而 / 只是返回到根目录吗?
@Hatkirby:是的,你说得对,谢谢。 我已更新文章以避免错误。
不用谢! 顺便说一句,网站很棒。 我觉得用 CSS 可以做到的事情真是太棒了。
我使用的是 Frontpage,所以我的“风格”被复制的可能性很高。 我真的不介意。 真正让我生气的是发现有人从我的网站窃取了两个完整的页面。 他们只是将所有文字复制粘贴到另外两个网站上。
这些网站的托管公司比毫无用处还要糟糕。 一旦我威胁要提起诉讼,小偷就被说服删除了一个页面 - 我不知道还能持续多久,然后重新编辑了另一个页面。 我不在乎它是否被重新编辑,那是我的想法,我的想象力,我的努力,我的时间,我的才能,我的技能和我的作品! 我想把这两个页面从这两个网站上删除。 如果有谁有好的方法可以从这些网站上删除我被复制的作品,请告诉我!
@Doreen:不幸的是,威胁要提起诉讼(然后可能真的提起诉讼)是唯一可以确保解决问题的方法。 至少您能够联系到他们。 如果他们链接了您的图片,您可能需要查看一些 防止这种情况的技术。
我能理解这对于某些情况是很有用的,例如,如果对于像 youtube 这样的网站,您想要为您的频道设置背景图片,您可以输入一个 URL 作为背景图片,但您无法上传一个,所以这是一种可能的使用方式,但我同意,如果您可以在任何地方上传您自己的图片,请这样做,并发挥您的想象力,创造您自己的图片!
我发现最好的方法是在 Firefox 中“右键单击 > 查看页面信息”。在“媒体”选项卡下,它会列出网页中使用的所有图像。最棒的是有一个方便的“另存为”按钮,它允许您一次性保存所有图像,当您试图弄清楚其他网站的工作原理时,这是一个福音……
在 IE 中怎么样:右键单击,保存背景!
在 Firefox 中:右键单击 | “查看背景” - 然后保存
似乎总有源源不断的毫无资格的 wannabees,他们不知何故确信自己有东西可以贡献给世界,尽管所有证据都相反。
最好拿一块布,把脸上的鸡蛋擦干净,免得它开始臭气熏天。
完全毫无意义的帖子,有几个回复解释了为什么它不值得任何人花时间阅读 - 您的读者从中学到的唯一价值可能是在您的 expense 上开怀大笑。合乎逻辑的做法应该是快速删除它,并尝试在下一个帖子中做得更好。
对于那些因为别人“偷窃”了你们的宝贵作品而感到沮丧的人,我有一个非常简单的解决方案 - 不要将它发布到网络上,在那里任何人都可以复制它并随意使用它。从目前为止我所看到的情况来看,我认为你这样做是在帮大家一个忙。与其浪费时间去追踪人们并威胁他们采取法律行动(你真的不认为托管公司会认真对待你吗?),你不认为你的时间最好花在创作更多如此美妙的原创内容上,而不是抱怨一些微不足道的事情吗?
对于那些认为禁用右键单击的一点 JavaScript 可以保护其作品的人 - 你知道关闭 js 只需要 1 秒吗!
加密你的 Flash 电影? - 和其他所有东西一样,在 rapidshare / megaupload / mediafire 等网站上找到解密应用程序大约需要 30 秒。你说出来:软件、音乐、电影、电子书,一旦它出现在野外,你就无法再控制它 - 如果你不能接受它完全免费供任何会使用谷歌的人使用 - 不要发布!
.php 小朋友们认为他们可以“编码”他们的蹩脚脚本,并以某种方式阻止人们复制 - 他们所做的只是表明他们对所处的行业了解甚少。他们为了“保护”自己的作品而做出的无用尝试带来的微不足道的麻烦,只会让“小偷”更加倾向于破解它并将其分发给任何想要它的人。
抱怨你在别人网站上找到的两个宝贵页面是荒谬的 - 你可能已经注意到,大多数人实际上希望自己的作品被传播和复制到整个网络上 - rss?youtube?醒醒……我敢打赌你真正感到恼火是因为你没有得到你认为自己应得的荣誉,对吧?你并没有真正失去任何东西,你仍然可以保留你的作品,并且仍然可以自豪地在你的网站上发布它,让其他人惊叹于你的才华,只是你的自尊心没有像你想要的那样得到满足。呜呜。你应该庆幸你的整个网站(或网站网络?)没有被抓取并通过一些棘手的改写脚本重新发布,要知道这很可能导致“小偷”通过自动驾驶赚钱,比你接下来几个月辛苦工作赚到的钱还要多。
不幸的是(对你而言)就是这样。事实是 - 如果我的浏览器可以渲染它 - 我已经得到了它!在某个白痴的博客上抱怨没有意义。此外 - 如果你的签名中的链接说明了什么,你遇到的问题比有人“偷窃”你的几个页面要大得多。
盲人领着盲人走 - suckers 们,再见了。
非常感谢,我很有帮助!