在 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;
如上面的語法所示，我們可以使用不同的值來設定背景圖像。
在下面的範例中，我們建立了 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>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 >
在下面的範例中，我們使用「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>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>
在下面的範例中，我們將漸層和圖像一起設定為背景。在輸出中，使用者可以觀察到漸變是從上到下的，並且 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>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>
在下面的範例中，我們將兩個圖像設定為 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>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中文網其他相關文章！
