資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何設定網頁的背景圖片？
精美的網頁是吸引使用者注意力的有力手段。在本文中，我們將瞭解如何將圖片新增到網頁的背景。
方法
本文將介紹兩種將圖片設定為網頁背景圖片的方法：
使用background屬性
使用CSS
方法一：使用background屬性
我們可以在`body標籤`中使用`background屬性`來設定網頁的背景圖片。我們需要指定要設定為背景圖片的圖片的URL或位置。
語法
<body background = "URL or Path of Image">Body of the Webpage</body>
示例
步驟1 - 首先，我們將定義HTML程式碼。
<!DOCTYPE html> <html> <head> <title>How to add an image as background image of a web page?</title> </head> <body> <h4>How to add an image as background image of a web page?</h4> </body> </html>
步驟2 - 現在，我們將編輯body標籤，使用本地檔案image.jpg作為背景圖片。
<body background="image.jpg">
以下是完整的程式碼：
<!DOCTYPE html> <html> <head> <title>How to add an image as background image of a web page?</title> </head> <body background="image.jpg"> <h4>How to add an image as background image of a web page?</h4> </body> </html>
方法二：使用CSS
我們也可以使用CSS將任何圖片設定為網頁的背景。為此，我們需要將所需圖片的位置或URL指定給`background-image屬性`。
語法
body {
background-image: url(" URL of the Image");
}
示例
步驟1 - 首先，我們將定義HTML程式碼。
<!DOCTYPE html> <html> <head> <title>How to add an image as background image of a web page?</title> </head> <body> <h4 style="background-color: white;">How to add an image as background image of a web page?</h4> </body> </html>
步驟2 - 現在我們將新增CSS。
<style>
body{
background-image: url("https://tutorialspoint.tw/images/logo.png");
}
</style>
以下是完整的程式碼：
<!DOCTYPE html>
<html>
<head>
<title>How to add an image as background image of a web page?</title>
<style>
body {
background-image: url("https://tutorialspoint.tw/images/logo.png");
}
</style>
</head>
<body>
<h4 style="background-color: white;">How to add an image as background image of a web page?</h4>
</body>
</html>
結論
在本文中，我們瞭解瞭如何將圖片設定為網頁的背景。我們研究了兩種實現相同目標的不同方法。首先，我們瞭解瞭如何透過使用background屬性來完成任務。之後，我們還了解了如何使用CSS來完成相同任務。
更新於：2023年9月9日
33K+ 次瀏覽
廣告