開心生活站

請輸入關鍵字詞

熱門搜索排行

位置：首頁 > IT科技 > 

如何設置HTML背景圖片

IT科技2.32W
目錄部分1：新建文檔1、創建一個文件夾用來存放HTML文件和背景圖片。2、將背景圖片放入HTML文件夾。3、創建一個HTML文件。部分2：編寫HTML文件1、複製並粘貼標準HTML代碼。2、添加背景圖像地址。部分3：查看HTML文件1、在網頁瀏覽器中打開HTML文件。2、編輯HTML文件。部分4：理解HTML代碼1、理解HTML和CSS標籤。2、理解DOCTYPE標籤。3、編輯HTML文件。4、理解HTML和CSS標籤。5、理解標題標籤。6、理解樣式標籤。7、理解主體標籤。8、編輯HTML文件。部分5：理解CSS代碼1、理解CSS代碼。2、查看CSS代碼。3、理解CSS代碼的各個部分。4、理解CSS聲明。如果你想向網頁中添加圖片，用HTML就可以了。但是如果你想將一張圖片設置爲網頁背景圖片，就同時需要HTML和CSS。HTML的全名叫做“超文本標記語言”，是一種用來指示瀏覽器在網頁中顯示什麼內容的代碼。 CSS的全名叫做“層疊樣式表”，用來改變網頁外觀和佈局。你還需要一張用於web頁面的背景圖片。

部分1：新建文檔

如何設置HTML背景圖片

1、創建一個文件夾用來存放HTML文件和背景圖片。在電腦上創建並命名一個文件夾，方便日後查找。你可以爲文件夾隨意命名，但是使用HTML時，最好養成習慣，使用簡短的單個單詞來命名文件和文件夾。

如何設置HTML背景圖片 第2張

2、將背景圖片放入HTML文件夾。將你想要用作背景的圖片放入HTML文件夾。 如果你不在意網頁是否能在網速較慢的舊設備上運行順暢，可以使用高分辨率圖片來作爲背景。選擇帶有重複圖樣的簡單圖片作爲背景也不錯，因爲你可以在這種背景下閱讀任何文本。

如果你沒有圖片，可以下載免費的背景圖。下載好圖片，將它放入創建好的HTML文件夾中。

如何設置HTML背景圖片 第3張

3、創建一個HTML文件。打開文本編輯器，然後新建一個文件。將文件另存爲index.html。你可以使用任何你想要的文本編輯器，系統自帶的文本編輯器也可以，如Windows的記事本，以及Mac OS X的文本編輯器。

如果你想要使用能處理HTML的文本編輯器，點擊這裏下載Windows、Mac OS X、Linux操作系統都可以使用的文本編輯器Atom。

如果你使用的是Mac電腦的文本編輯器，在開始編寫HTML文件之前，單擊“格式”菜單，然後單擊“生成純文本”。該設置會確保HTML文件在網頁瀏覽器中正常加載。

諸如Microsoft Word之類的文字處理程序並不適合編寫HTML，因爲它們添加了一些不可見的字符和格式，這些字符和格式可能會破壞HTML文件，讓它無法在網頁瀏覽器中正確顯示。

部分2：編寫HTML文件

如何設置HTML背景圖片 第4張

1、複製並粘貼標準HTML代碼。選擇並複製下面的HTML代碼，然後粘貼到打開的 index.html文件中。

<!DOCTYPE html><html><head><title>頁面標題</title><style>body {background-image: url(" ");} </style></head><body></body></html>

如何設置HTML背景圖片 第5張

2、添加背景圖像地址。在index.html文件中找到“background-image: url(" ");”這一行，將光標移到括號之間，然後輸入背景圖片文件名。確保包含背景圖片文件擴展名。

當你完成的時候，應該是這樣的：
background-image: url("background.png");當你使用的文件名沒有文件路徑或地址時，網頁瀏覽器將在網頁文件夾中查找指定的圖片。如果文件位於文件系統上的另一個文件夾中，則需要爲文件添加完整路徑。保存HTML文件。

如何設置HTML背景圖片 第6張

部分3：查看HTML文件

如何設置HTML背景圖片 第7張

1、在網頁瀏覽器中打開HTML文件。右鍵單擊index.html文件，然後在你選擇的網頁瀏覽器中打開它。當瀏覽器打開時，如果沒有看到圖片，確認圖片文件名在index.html文件的文本編輯器窗口中拼寫正確。

當瀏覽器打開時，如果你看到的是HTML代碼，而不是背景圖片，那是因爲你的index.html文件被保存爲富文本文檔。最好還是換一個文本編輯器來編輯HTML文件。

如何設置HTML背景圖片 第8張

2、編輯HTML文件。在文本編輯器窗口中，將光標移至<body> </body>標籤之間，然後輸入“Hello world!”。重新加載瀏覽器窗口，查看背景圖片上方的文本。

部分4：理解HTML代碼

如何設置HTML背景圖片 第9張

1、理解HTML和CSS標籤。HTML代碼由開始標籤和結束標籤組成。<body>是主體的開始標籤，</body>是主體的結束標籤。HTML頁面上的每個開始標籤都需要有一個結束標籤，以便正確顯示頁面。

如何設置HTML背景圖片 第10張

2、理解DOCTYPE標籤。每一個編寫規範的HTML頁面開頭都應該有<!DOCTYPE html>。該標籤是用來告訴瀏覽器該文件是HTML文件。

如何設置HTML背景圖片 第11張

3、編輯HTML文件。在文本編輯窗口中，將光標移至<body> </body>標籤之間，然後輸入“Hello world!”。重新加載瀏覽器窗口，查看背景圖片上方的文本。

如何設置HTML背景圖片 第12張

4、理解HTML和CSS標籤。HTML代碼由開始標籤和結束標籤組成。<body>是主體的開始標籤，</body>是主體的結束標籤。HTML頁面上的每個開始標籤都需要有一個結束標籤，以便正確顯示頁面。

如何設置HTML背景圖片 第13張

5、理解標題標籤。<title> 標籤是出現在瀏覽器窗口標題欄中的文本，以及在瀏覽器標籤中顯示的文本。

如何設置HTML背景圖片 第14張

6、理解樣式標籤。<style>標籤標示出CSS內容。<style>標籤內的所有內容都是CSS代碼。

如何設置HTML背景圖片 第15張

7、理解主體標籤。在<body>標籤內輸入的任何內容都會顯示出來，除了HTML代碼或CSS 代碼。

如何設置HTML背景圖片 第16張

8、編輯HTML文件。在文本編輯窗口中，將光標移至<body> </body>標籤之間，然後輸入“Hello world!”。重新加載瀏覽器窗口，查看背景圖片上方的文本。

部分5：理解CSS代碼

如何設置HTML背景圖片 第17張

1、理解CSS代碼。在index.html文件代碼中，<style>標籤內的CSS代碼指示瀏覽器在網頁顯示時，向<body>標籤添加特定名稱的背景圖片。

如何設置HTML背景圖片 第18張

2、查看CSS代碼。

3、

body {background-image: url("background.png");}

如何設置HTML背景圖片 第19張

4、理解CSS代碼的各個部分。CSS樣式由選擇器和聲明兩部分組成。 在示例中，body是選擇器，而
background-image: url("background.png") 是聲明部分。選擇器可以是任何HTML標籤。聲明總是在大括號{ }之間。

如何設置HTML背景圖片 第20張

5、理解CSS聲明。CSS聲明由屬性和值兩部分組成。在大括號之間，
background-image 是屬性，而url("background.png")是值。屬性描述樣式類型，值描述屬性是如何樣式化的。屬性和值始終用冒號“:”分隔。CSS聲明始終以分號“;”結尾。

標籤：設置 背景圖片 html

相關文章