在CSS中添加图像而不是HTML中的链接？

Question

如何将我的投资组合图像添加到CSS中，并保持与这个小提琴相同的外观：http://jsfiddle.net/Q535e/

<section>
</section>

我正在学习如何制作我的网站的投资组合部分，为此我只是添加了一些随机链接到HTML，但现在我想下载这些图像并将它们保存到“images”文件夹中。因此，应该从我的硬盘（“图像”文件夹）而不是网络链接中调用图像。

提前致谢！

Answer 1

将background-image属性分配给您想要图像的div。例如：

HTML：

<div class="projectshot">...</div>

CSS：

.projectshot {
    background-image: url("image.jpg");
}

如果我理解你的措辞，你就不能在你的硬盘上制作图像来源于网站上的图像来源。图像必须托管在服务器上。

Answer 2

如果我理解正确，您需要将所需的所有图像下载到硬盘上。然后将它们保存到您提到的“images”文件夹中。

现在更改你的html：

<img alt="Tour Eiffel" src="http://www.travelskyline.net/wallpapers/eiffel_tower_paris_france-800x600.jpg">

要：

<img alt="Tour Eiffel" src="images/eiffel_tower_paris_france-800x600.jpg">

为您拥有的所有图像执行此操作。

Answer 3

不太清楚你对图像位置的意思。你可以为img标签和通过CSS实现的图像做到这一点。

但是，您可以在链接上使用background-image css规则并在这些链接上设置height，width和display：block之后实现目标。