資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究在 CSS 中，使用哪個屬性來設定元素的背景圖片？
在 CSS 中，'background-image' 屬性用於使用 CSS 設定元素的背景圖片。'background-image' 屬性接受 4 個不同的屬性值，如下所述。
Url () − 它接受圖片路徑或遠端 URL，從特定位置獲取圖片並將其設定為背景。
None − 使用者可以使用 none 作為 'background-image' 屬性的值來移除背景。
Initial − 它設定初始背景，在大多數情況下為 none。
Inherit − 它設定與父元素相同的背景圖片。
語法
使用者可以按照以下語法在 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>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 元素設定任何背景，因為初始背景為 none。
<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>
示例 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://tutorialspoint.tw/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>
示例 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>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 作為值，背景圖片也會按相同的順序出現，從而建立一個堆疊。
421 次瀏覽
