哪個屬性用於使用 CSS 設定元素的背景圖片？-css教學-PHP中文網

首頁

web前端

css教學

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

王林

Sep 05, 2023 am 10:21 AM

哪个属性用于使用 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 元素的尺寸高於圖像，則它會重複設定背景圖像。

<html>
<head>
   <style>
      .div-ele {
         background-image: url('https://png.pngtree.com/thumb_back/fh260/background/20210922/pngtree-abstract-nature-green-and-sunny-defocused-light-background-image_906725.png');
         height: 400px;
         width: 500px;
         font-size: 3rem;
         color: black;
      }
   </style>
</head>
<body>
   <h2 id="Setting-up-the-background-image-using-the-i-background-image-i-property">Setting up the background image using the <i> background-image </i> property</h2>
   <div class = "div-ele">
      This is a div.
      This is a div.
      This is a div.
      This is a div.
   </div>
</body>
</html >

範例 2

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

<html>
<head>
   <style>
      .div-ele {
         background-image: initial;
         height: 300px;
         width: 500px;
         font-size: 2rem;
         color: black;
         border: 2px yellow solid;
      }
   </style>
</head>
<body>
   <h3 id="Setting-up-the-background-image-using-the-i-background-image-i-property">Setting up the background image using the <i> background-image </i> property.</h3>
   <div class = "div-ele"> Hi users, how are you? </div>
</body>
</html>

範例 3

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

<html>
<head>
   <style>
      .div-ele {
         background-image: linear-gradient(rgba(255, 0, 0, 0.6), rgba(0, 0, 255, 0.6)), url('https://www.tutorialspoint.com/css/images/css-mini-logo.jpg');
         height: 300px;
         width: 500px;
         font-size: 4rem;
         color: black;
         border: 2px yellow solid;
      }
   </style>
</head>
<body>
   <h2 id="Setting-up-the-background-image-using-the-i-background-image-i-property">Setting up the background image using the <i> background-image </i> property.</h2>
   <div class = "div-ele">
      Welcome to TutorialPoint's website!
   </div>
</body>
</html>

範例 4

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

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

<html>
<head>
   <style>
      div {
         background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbmvLkYgy28lI-iZWZpd3aAz0mi25dpUNXnU6OUE2V&s"), url("https://media.istockphoto.com/id/1090883040/vector/twinkle-little-star.jpg?s=612x612&w=0&k=20&c=Z5csKM3_ccD2MWqeWn6XfBoCqUeGf1IJHN09hJhCQEM=");
         background-position: right bottom, left top;
         background-repeat: no-repeat, repeat;
         height: 500px;
         width: 500px;
         font-size: 2rem;
         color: white;
      }
   </style>
</head>
<body>
   <h2 id="Setting-up-the-multiple-background-images-using-the-i-background-image-i-property">Setting up the multiple background images using the <i> background-image </i> property.</h2>
   <div>
      This div contains 2 background images.
      The first one is at the right bottom, and the second one is at the left top position.
   </div>
</body>
</html>

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

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

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除