使用CSS設定背景影像的大小？
使用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 id="Using-the-background-size-CSS-property-to-set-the-size-of-the-background-image">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 id="Using-the-i-background-size-i-CSS-property-to-set-the-size-of-the-background-image">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 id="Using-the-i-background-size-contain-i-CSS-property-to-set-the-size-of-the-background-image">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 id="Using-the-i-background-size-length-auto-i-CSS-property-to-set-the-size-of-the-background-image">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設定背景影像的大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
