如何在 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

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

Answer 2

您可以直接从找到图像的位置复制 link，方法是在浏览器中右键单击图像并选择 'Copy Image Address'，然后将其粘贴到图像 URL 中。

Answer 3

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

让我们将主要 HTML 文件保存在以您的项目命名的文件夹中，例如 Peadar08 是项目名称。所以在你的文件夹中放一个 index.html 文件，并在同一层为你的资产保留一个文件夹，就像这样...

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

现在只看图片的例子，其他资源也可以照样做，因此，您可以通过两种方式使用图像，

作为 IMAGE by img 标签在你的 HTML，所以记住上面的结构你可以在你的 HTML 就像这样。

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

因此您的图像将完美呈现为资产，并且您的 HTML 文件处于同一级别，因此只需提及以文件夹名称开头的路径。

如果您需要将您的图像用作背景图像，请参阅另一个示例 CSS

所以你需要做的就是使用 ../ 返回一个文件夹，因为你在 css 文件中，../ 这会让你返回一个文件夹，即在资产文件夹中，然后您可以跟随路径。所以在你的CSS中使用这个..

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

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

希望对您有所帮助。

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

How to use a jpg as a background image in html

html

css

jpeg