如何在html中使用jpg作为背景图片？

Question

我试图使用一个保存在文件中的jpeg作为html文件的背景，使用其文件路径作为url。我有以下的方法，但它不工作。有什么想法吗？

<style>
    body {
        background-image:url('C:\Users\...\background.jpg');    
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center; 
    }

Answer 1

好的，所以给出相对路径是非常容易的，只是你需要了解你项目的基本文件夹结构，虽然我不知道你是如何保存你的文件和文件夹结构的，所以我将告诉你前端项目的理想文件夹结构（根据我的说法），并将向你解释如何使用资产的相对路径。

让我们把主要的HTML文件保存在一个由你的项目命名的文件夹中，例如 Peadar08 所以在你的文件夹里放一个index.html文件，并在同一层次上为你的assets保留一个文件夹，像这样......

然后在 资产 文件夹中为你各自的资产（图片、js、css等）创建更多的文件夹，就像这样......。

现在只是看到一个图片的例子，你可以按照同样的方式来使用其他资产，所以你可以用两种方式来使用图片。

1. 作为一个 图像 由 img 标签，所以记住上面的策略，你可以在你的HTML中使用图片，就像这样。

   <img src="assets/images/example.png" alt="altText"/>

因此，你的图片将完美地呈现为assets，而你的HTML文件也在同一层次上，所以只需提及以文件夹名称开头的路径。

现在看看另一个例子，如果你需要用CSS来使用你的图片作为背景图片的话

所以你需要做的就是使用 ../ 回一个文件夹，只是因为你在css文件和 ../ 这将带你向上移动一个文件夹，即在assets文件夹中，然后你就可以折叠路径了。

.ExampleClass {
    background-image: url('../assets/images/example.png');
}

要把两个文件夹向上移动，只需使用 ../../ 等。

希望能帮到你。

Answer 2

你不需要直接从C:中指定位置，而是从根目录中指定与你的index.html所在的位置。

Answer 3

你可以直接从你找到图片的地方复制链接，在浏览器中右击图片，选择 "复制图片地址"，然后粘贴到图片URL中。