你能在CSS中找到一张图片吗？

Question

我刚开始学习CSS。我喜欢的一种学习方法是从我喜欢的网站复制源代码，然后重新构建它来学习它是如何完成的。我没有使用那个网站或窃取它 - 我只是在练习。例如，我会从样式表中选取各种元素，然后在自己的页面中进行操作以查看其工作原理等。有时，我很难看到背景图形在代码中的工作原理，因此我想实际获取背景图像，以确保知道那张图片是什么（因为由于背景颜色与图形的混合，CSS中这有点困难）。

无论如何，在“传统”的HTML网站上，您可以右键单击图像并将其保存到计算机上。在CSS中可以做到吗？我可以获得.css样式文件（它们会在记事本等中弹出）-但我能获取图形吗？

ID代码通常会显示类似于：

background:url("graphicfilename.jpg") no-repeat left top;

...但这并没有告诉我这个文件所在的目录。如果我问了一个“禁忌”类型的问题，比如我试图窃取什么东西，或者其他什么，那么请不要误解。我只是想学习。

在 CSS 衍生的网页中，我能得到图形吗？

谢谢，

Phile

- Phil E.

Answer 1

在CSS中，背景图片的URL是相对于CSS资源的位置而言的。因此，如果您有以下内容：

background: url('../images/some-image.png')

而 CSS 的 URL 是：

/css/my-style.css

那么该图像将位于：

/images/some-image.png

顺便提一下：如果你要分析网页、css等内容，请确保你拥有适当的插件来使这一过程更加容易。使用或获取Firefox，并安装Firebug和Web Development工具栏。它们可以让检查源代码HTML和CSS变得非常轻松。Firebug还会显示由CSS加载的图像缩略图！

编辑：不用担心检查或调整其他人的HTML或CSS以适应自己的目的。这就是我们所有人学习的方式，也是我们所有人获得技术/代码解决方案灵感或仅仅获取自己网站功能和特性想法的方式。它在那里，所以请使用它。

- Richard H

Answer 2

..但这并没有告诉我该文件所在的目录。

该图像相对于样式表。

顺便说一下，你不要在url()中加入"。你可以简单地写成background:url(graphicfilename.jpg)，因为至少有一个浏览器（Mac上的MSIE5.5）会在你添加引号时出错。

- geocar

Answer 3

有一些工具可以帮助你从网站获取图片。例如，使用Google Chrome浏览器，你可以右键点击任何元素（如图片），然后选择“检查元素”。这将打开开发者工具窗口。从那里，点击名为“资源”的选项卡。这将显示页面正在使用的所有文件（包括图片）的完整列表。找到你想要的图片，右键单击它，然后选择“另存为...”

如果你正在查看CSS，并且看到对背景图像的引用，则该引用是相对于CSS文件的。因此，如果CSS文件位于domain.org/css/myfile.css，并且背景图像在代码中为background: url("myimage.png");，则该图像位于domain.org/css/myimage.png。

- Cypher