Question

我的HTML文件的路径：C:\Users\Name\Documents\Coding\Battleship\index.html
图片路径：C:\Users\Name\Documents\Coding\Battleship\Water.jpg

我尝试将其添加如下：

body {
    background-image: url("file://C:\Users\Name\Documents\Coding\Battleship\Water.jpg") no-repeat center center;
    background-size: cover;
}

但是，它不起作用。有谁知道如何解决这个问题？

Answer 1

你不能这样做

background-image: url("file://C:\Users\Name\Documents\Coding\Battleship\Water.jpg") no-repeat center center;

您可以将图片放置在项目根目录（或子文件夹）中，并使用如下

假设您的项目文件夹为Battleship

如果您将Water.jpg放在root中（如下所示）

Battleship
-index.html
-Water.jpg

然后使用此

body {
    background-image: url("./Water.jpg") no-repeat center center;
    background-size: cover;
}

如果您将Water.jpg放在子文件夹中（如下所示）

Battleship
-index.html
-images
    -Water.jpg

然后使用此

body {
    background-image: url("./images/Water.jpg") no-repeat center center;
    background-size: cover;
}

Check this w3schools.com source

Answer 2

请参阅以下测试代码。

问题是你使用background-image只接受一个参数，你应该使用background这是将所有背景属性写成一个的简写。

参考：CSS background [最后一节]

您需要更改以下CSS

body {
        background: url("Water.jpg") no-repeat center center;
        background-size: cover;
    }

代码示例：

html, body{
  width:100%;
  height:100%;
  margin:0px;
}
body {
    background: url("http://lorempixel.com/400/200/") no-repeat center center;
    background-size: cover;
}

<html>
<body>
</body>
</html>

Answer 3

不确定这是否为时已晚，但我认为问题非常简单。您对URL进行了正确的操作，这是一个棘手的问题：URL的链接带有反斜杠（无需使用CSS来更正此问题），即：您的：我的HTML-

的路径

file: C:\Users\Name\Documents\Coding\Battleship\index.html

正确答案：应使用正斜杠我的HTML文件的路径：

 C:/Users/Name/Documents/Coding/Battleship/index.html

Answer 4

只需制作一个文件夹＆amp;将两个文件放入其中并简单地链接您的图像路径。

如何在CSS中添加本地文件作为背景？

4 个答案: