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

路徑爲我的HTML文件：用於圖片C:\Users\Name\Documents\Coding\Battleship\index.html
路徑：C:\Users\Name\Documents\Coding\Battleship\Water.jpg如何在CSS中添加本地文件作爲背景？

我試圖如下添加：

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

但是，它不工作。有誰知道如何解決這個問題？

來源

2017-10-14 A.S.J

的文件p ath需要與您服務的網絡服務器的文檔根目錄相關。除非你不使用網絡服務器。 – Jerinaw

OH修復它，謝謝！ –

請參考以下測試代碼。

問題是你使用的是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>

來源

2017-10-14 12:15:50

非常感謝，這也起作用！ –

@ A.S.J不客氣！ :) –

你不能做這樣的

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

您可以將圖像是項目的根（或子文件夾），並使用如下

假設你的項目文件夾是Battleship

如果你把根Water.jpg（如下）

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

來源

2017-10-14 12:13:13

只是做一個文件夾&把兩個文件到它，只是鏈接圖像路徑。

來源

2017-10-14 12:13:13

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

回答

相關問題