哪個屬性用於使用 CSS 設定元素的背景圖片？

在 CSS 中，‘background-image’屬性用於使用 CSS 設定元素的背景圖片。背景圖像屬性有 4 個不同的屬性，如下所述。

• Url ()- 它需要一個圖像路徑或遠端 URL 從特定位置獲取圖像並將其設定為背景。

• None- 使用者可以使用 none 作為背景圖像屬性的值來刪除背景。

• Initial- 它設定初始背景，在大多數情況下沒有背景。

• 繼承- 它設定與父元素相同的背景圖像。

文法

使用者可以依照下列語法在CSS中使用「background-image」屬性。

background-image: url('URL'); background-image: inherit; background-image: initial; background-image: none;

如上面的語法所示，我們可以使用不同的值來設定背景圖像。

範例 1

在下面的範例中，我們建立了 HTML div 元素並使用 CSS 指定了高度和寬度。此外，我們也使用了「background-image」CSS 屬性來設定 div 元素的背景。

在輸出中，使用者可以觀察到，如果 div 元素的尺寸高於圖像，則它會重複設定背景圖像。

   
  
Setting up the background image using the  background-image  property
 
 This is a div. This is a div. This is a div. This is a div. 
  

範例 2

在下面的範例中，我們使用「initial」作為背景圖像值。在輸出中，使用者可以觀察到它沒有為 div 元素設定任何背景，因為初始背景沒有。

   
  
Setting up the background image using the  background-image  property.
 
 Hi users, how are you? 
  

範例 3

在下面的範例中，我們將漸層和圖像一起設定為背景。在輸出中，使用者可以觀察到漸變是從上到下的，並且 div 元素的內容位於漸變上方。

   
  
Setting up the background image using the  background-image  property.
 
 Welcome to TutorialPoint's website! 
  

範例 4

在下面的範例中，我們將兩個圖像設定為 div 元素的背景。此外，我們為這兩個元素設定了不同的背景位置。在輸出中，使用者可以觀察到一張影像位於右下角，另一張影像位於左上角。

每當我們一起使用兩個背景圖像時，第一個圖像就會出現在第二個圖像的頂部。

   
  
Setting up the multiple background images using the  background-image  property.
 
 This div contains 2 background images. The first one is at the right bottom, and the second one is at the left top position. 
  

使用者在本教學中學習如何使用「background-image」屬性來設定圖像的背景。使用者也學會了將漸層設定為 HTML 元素的背景。使用者還可以使用多個圖像作為背景，並且當他們添加圖像的 URL 作為值時，背景圖像也會以創建堆疊的相同順序出現。

以上是哪個屬性用於使用 CSS 設定元素的背景圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！