如何使用CSS為body元素設定背景圖片？-css教學-PHP中文網

如何使用CSS為body元素設定背景圖片？

PHPz

發布： 2023-09-08 18:33:02

轉載

3425 人瀏覽過

如何使用CSS為body元素設定背景圖片？

CSS（層疊樣式表）是設計網站視覺外觀的強大工具。 background-image 屬性是CSS中的眾多功能之一，用於使用 background-image 屬性設定背景影像。

在網頁開發中，背景圖片是網站整體設計的重要組成部分。 HTML中body元素的預設背景是白色，但只需幾行CSS程式碼，就可以將網頁的背景更改為任何圖像。

在 CSS 中設定背景圖片

設定背景圖片是提升網站視覺吸引力的好方法，可以透過CSS和body元素輕鬆實現。它可以創造出獨特而精彩的外觀，為網站增添專業的感覺。在這裡，我們將學習如何使用CSS為body元素設定背景圖片。

基本語法

使用以下語法，透過CSS設定body元素的背景圖像：

body {
   background-image: url('path to the image.jpg');
}

登入後複製

上述語法將body元素的背景影像設定為位於"path/to/image.jpg"的圖片。 url()函數用於指定影像的路徑。

使用body元素設定背景圖片

現在，我們將學習一些簡單的步驟，可以按照這些步驟為body元素設定背景圖像，使網站更加突出。

第 1 步：選擇圖像

在使用body元素為網站新增背景圖像之前，我們需要選擇一張圖片。這張圖片可以是照片、圖形或圖案。

第二步：將映像加入到HTML中

在這一步驟中，將映像加入到HTML程式碼中。為此，請使用以下程式碼。

<body style="background-image: url(https://www.tutorialspoint.com/dip/images/einstein.jpg);">

登入後複製

或

<style>
   body {background-image: url("https://www.tutorialspoint.com/dip/images/einstein.jpg");}
</style>

登入後複製

第三步：使用CSS樣式化背景圖片

將圖像加入 HTML 程式碼後，我們使用 CSS 設定圖像樣式。使用以下程式碼調整影像的位置和大小。

body {
   background-size: cover;
   background-repeat: no-repeat;
}

登入後複製

我們使用background-size屬性來縮放覆蓋整個背景的圖像，而「no-repeat」則確保圖像不會重複。

第 4 步：組合 HTML 與 CSS 程式碼

Example

的中文翻譯為：

範例

這裡，我們將結合 HTML 和 CSS 來設定背景圖片

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-image: url('https://www.tutorialspoint.com/dip/images/einstein.jpg');
         background-repeat: no-repeat;
         background-size: cover;
      }
      h1,h3{
         text-align: center;
         color: red;
      }
   </style>
</head>
<body>
   <h1>Welcome to TutorialsPoint</h1>
   <h3>Set Background image for the body element</h3>
</body>
</html>

登入後複製

為了進一步自訂背景圖像，可以使用額外的CSS屬性，例如不透明度、背景位置和背景附著等。