如何在使用CSS的網頁背景中添加重複的PNG圖像？

Question

我使用下面的CSS代碼：

body 
{ 
    background-image: url(img/tasky_pattern.png); 
} 

我的圖片地址是downloads/dist/image/tasky_pattern.png。我不知道我要出錯的地方以及如何糾正這個問題。

謝謝。

Answer 1

你鏈接IMG/tasky_pattern.png的圖像是一個叫下載/距離/圖像/ tasky_pattern.png文件夾下，但您使用IMG而不是像

看一看修復該錯字。這可能是您的圖片沒有顯示的原因。

要檢查您的文件引用在chrome中打開您的頁面並檢查元素。找到說背景圖像的CSS代碼：url（img/tasky_pattern.png）;然後導航到目標。這會給你完整的URL在瀏覽器地址欄，會告訴你你在哪裏錯了你的路徑名

Answer 2

您需要確保您的圖片存在於您的文件夾中，因此請將您的圖片上傳到./img/文件夾。然後，你可以使用下面的CSS代碼：

body 
{ 
    background-image: url("img/tasky_pattern.png") repeat; 
} 

如果您不能上傳圖片到您./img/文件夾，您可以將圖片上傳到一個免費的檔案託管網站，並使用他們提供的，而不是鏈接。

Answer 3

的CSS背景默認行爲重演......

您可以指定EXIS

background: url('image_path'); /* it repeats itself */ 
// or // 
background: url('image_path') repeat-x ; /* it repeats only x-exis */ 
// or // 
background: url('image_path') repeat-y ; /* it repeats only y-exis */ 
// or // 
background: url('image_path') no-repeat; /* no repeats */ 

SEE DEMO