使用CSS，我們可以使用‘background-image’屬性為HTML元素設置背景圖像。此外，在添加背景圖像后，還需要設置其尺寸。
我們可以使用CSS的“background-size”屬性來設置背景圖像的大小。
語法
用戶可以按照下面的語法使用CSS來設置背景圖像的大小。
background-size: width length | width | contain | inherit | cover | initial
登錄后復制
我們可以使用上述值來設置背景圖片的大小。在這里，我們已經解釋了所有的值。
寬度長度 – 設置背景圖像的寬度和高度。用戶可以使用像素、百分比或 rem 作為寬度和長度值。
寬度 – 它僅設置圖像的寬度并設置“自動”高度。
Contain ? 用于設置HTML元素的背景圖片，而不會減小背景圖片的尺寸。
繼承 ? 它從父元素的背景圖片中繼承背景圖片大小。
封面 ? 它以一種方式設置背景圖像的尺寸，使其能夠適應HTML元素。
示例 1
在下面的示例中，我們為HTML div元素設置了背景圖像。div元素的尺寸為500 X 300。使用background-size屬性，我們將背景圖像設置為200 X 200的尺寸。
在輸出中，用戶可以觀察到背景圖像的大小小于div元素。此外，我們使用了“background-repeat: no-repeat”CSS屬性來避免重復。
<html>
<head>
<style>
.div {
background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
background-size: 200px 200px;
width: 500px;
height: 300px;
border: 1px solid blue;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h3>Using the background-size CSS property to set the size of the background image</h3>
<div class = "div">
This is a content of the div.
</div>
</body>
</html>
登錄后復制
Example 2
的翻譯為：
示例2
在下面的示例中，我們使用“background-size: cover”CSS 屬性來設置背景圖像的尺寸。
在輸出中，我們可以觀察到背景圖像適合 div 元素。然而，當我們將background-size設置為cover時，一些圖像邊緣被切掉了。
<html>
<head>
<style>
.div {
background-image: url("https://i.pinimg.com/736x/91/aa/88/91aa882cdcb4632063535e86c829d3ba.jpg");
background-size: cover;
width: 500px;
height: 500px;
border: 2px solid green;
}
</style>
</head>
<body>
<h3>Using the <i> background-size </i> CSS property to set the size of the background image</h3>
<div class = "div">
This is a content of the div.
</div>
</body>
</html>
登錄后復制
Example 3
的中文翻譯為：
示例 3
在下面的示例中，我們使用“background-size: contian”CSS 屬性來設置背景圖像大小。
在輸出中，我們可以看到它設置了背景圖像，而沒有抑制圖像的尺寸。
<html>
<head>
<style>
.div {
background-image: url("https://cdn.pixabay.com/photo/2016/06/02/02/33/triangles-1430105__480.png");
background-size: contain;
width: 500px;
height: 500px;
border: 2px solid green;
font-size: 3rem;
}
</style>
</head>
<body>
<h3>Using the <i> background-size: contain </i> CSS property to set the size of the background image</h3>
<div class = "div">
Hello! How are you?
</div>
</body>
</html>
登錄后復制
Example 4
的翻譯為：
示例4
在下面的示例中，我們只給出了’background-size’屬性的寬度值。每當我們只使用一個值作為’background-size’屬性時，它會將高度設置為自動，用戶可以在輸出中看到這一點。
<html>
<head>
<style>
.div {
background-image: url("https://images.pexels.com/photos/235985/pexels-photo-235985.jpeg?cs=srgb&dl=pexels-pixabay-235985.jpg&fm=jpg");
background-size: 20rem;
width: 500px;
height: 500px;
border: 2px solid green;
font-size: 3rem;
}
</style>
</head>
<body>
<h3>Using the <i> background-size: length auto </i> CSS property to set the size of the background image</h3>
<div class = "div">
Hello! How are you?
</div>
</body>
</html>
登錄后復制
用戶學會了使用 CSS 設置背景圖像的大小。我們可以設置自定義尺寸來設置背景圖片。此外，我們可以將背景尺寸的寬度和高度設置為“auto”值。如果用戶希望使用背景覆蓋整個 HTML 元素，則應使用“cover”作為背景大小屬性的值。
以上就是使用CSS設置背景圖像的大小？的詳細內容，更多請關注www.92cms.cn其它相關文章！
