生活全書館如何設定HTML背景圖片
- IT科技
- 關注：2.21W次
部分1：新建文件
1、建立一個資料夾用來存放HTML檔案和背景圖片。在電腦上建立並命名一個資料夾，方便日後查詢。你可以為資料夾隨意命名，但是使用HTML時，最好養成習慣，使用簡短的單個單詞來命名檔案和資料夾。
2、將背景圖片放入HTML資料夾。將你想要用作背景的圖片放入HTML資料夾。 如果你不在意網頁是否能在網速較慢的舊裝置上執行順暢，可以使用高解析度圖片來作為背景。選擇帶有重複圖樣的簡單圖片作為背景也不錯，因為你可以在這種背景下閱讀任何文字。
如果你沒有圖片，可以下載免費的背景圖。下載好圖片，將它放入建立好的HTML資料夾中。
3、建立一個HTML檔案。開啟文字編輯器，然後新建一個檔案。將檔案另存為index.html。你可以使用任何你想要的文字編輯器，系統自帶的文字編輯器也可以，如Windows的記事本，以及Mac OS X的文字編輯器。
如果你想要使用能處理HTML的文字編輯器，點選這裡下載Windows、Mac OS X、Linux作業系統都可以使用的文字編輯器Atom。
如果你使用的是Mac電腦的文字編輯器，在開始編寫HTML檔案之前，單擊“格式”選單，然後單擊“生成純文字”。該設定會確保HTML檔案在網頁瀏覽器中正常載入。
諸如Microsoft Word之類的文書處理程式並不適合編寫HTML，因為它們添加了一些不可見的字元和格式，這些字元和格式可能會破壞HTML檔案，讓它無法在網頁瀏覽器中正確顯示。
部分2：編寫HTML檔案
1、複製並貼上標準HTML程式碼。選擇並複製下面的HTML程式碼，然後貼上到開啟的 index.html檔案中。
<!DOCTYPE html><html><head><title>頁面標題</title><style>body {background-image: url(" ");} </style></head><body></body></html>
2、新增背景影象地址。在index.html檔案中找到“background-image: url(" ");”這一行，將游標移到括號之間，然後輸入背景圖片檔名。確保包含背景圖片副檔名。
當你完成的時候，應該是這樣的：
background-image: url("background.png");當你使用的檔名沒有檔案路徑或地址時，網頁瀏覽器將在網頁資料夾中查詢指定的圖片。如果檔案位於檔案系統上的另一個資料夾中，則需要為檔案新增完整路徑。儲存HTML檔案。
部分3：檢視HTML檔案
1、在網頁瀏覽器中開啟HTML檔案。右鍵單擊index.html檔案，然後在你選擇的網頁瀏覽器中開啟它。當瀏覽器開啟時，如果沒有看到圖片，確認圖片檔名在index.html檔案的文字編輯器視窗中拼寫正確。
當瀏覽器開啟時，如果你看到的是HTML程式碼，而不是背景圖片，那是因為你的index.html檔案被儲存為富文字文件。最好還是換一個文字編輯器來編輯HTML檔案。
2、編輯HTML檔案。在文字編輯器視窗中，將游標移至<body> </body>標籤之間，然後輸入“Hello world!”。重新載入瀏覽器視窗，檢視背景圖片上方的文字。
部分4：理解HTML程式碼
1、理解HTML和CSS標籤。HTML程式碼由開始標籤和結束標籤組成。<body>是主體的開始標籤，</body>是主體的結束標籤。HTML頁面上的每個開始標籤都需要有一個結束標籤，以便正確顯示頁面。
2、理解DOCTYPE標籤。每一個編寫規範的HTML頁面開頭都應該有<!DOCTYPE html>。該標籤是用來告訴瀏覽器該檔案是HTML檔案。
3、編輯HTML檔案。在文字編輯視窗中，將游標移至<body> </body>標籤之間，然後輸入“Hello world!”。重新載入瀏覽器視窗，檢視背景圖片上方的文字。
4、理解HTML和CSS標籤。HTML程式碼由開始標籤和結束標籤組成。<body>是主體的開始標籤，</body>是主體的結束標籤。HTML頁面上的每個開始標籤都需要有一個結束標籤，以便正確顯示頁面。
5、理解標題標籤。<title> 標籤是出現在瀏覽器視窗標題欄中的文字，以及在瀏覽器標籤中顯示的文字。
6、理解樣式標籤。<style>標籤標示出CSS內容。<style>標籤內的所有內容都是CSS程式碼。
7、理解主體標籤。在<body>標籤內輸入的任何內容都會顯示出來，除了HTML程式碼或CSS 程式碼。
8、編輯HTML檔案。在文字編輯視窗中，將游標移至<body> </body>標籤之間，然後輸入“Hello world!”。重新載入瀏覽器視窗，檢視背景圖片上方的文字。
部分5：理解CSS程式碼
1、理解CSS程式碼。在index.html檔案程式碼中，<style>標籤內的CSS程式碼指示瀏覽器在網頁顯示時，向<body>標籤新增特定名稱的背景圖片。
2、檢視CSS程式碼。
3、
body {background-image: url("background.png");}
4、理解CSS程式碼的各個部分。CSS樣式由選擇器和宣告兩部分組成。 在示例中，body是選擇器，而
background-image: url("background.png") 是宣告部分。選擇器可以是任何HTML標籤。宣告總是在大括號{ }之間。
5、理解CSS宣告。CSS宣告由屬性和值兩部分組成。在大括號之間，
background-image 是屬性，而url("background.png")是值。屬性描述樣式型別，值描述屬性是如何樣式化的。屬性和值始終用冒號“:”分隔。CSS宣告始終以分號“;”結尾。
- 文章版權屬於文章作者所有，轉載請註明 https://shqsg.com/dianzi/1ykwe8.html
