溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么在css中設置背景圖片的大小？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。
在css中，可以利用background-size屬性設置背景圖片的大小，該屬性可以指定背景圖像的尺寸，語法格式“background-size: 帶長度單位的數值|百分比值|cover|contain;”。
在css中，可以利用background-size屬性設置背景圖片的大小；可以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
background-size:auto;/* 默認值，不改變背景圖片的高度和寬度 */ background-size:100px 50px;/* 第一個值為寬，第二個值為高，當設置一個值時，將其作為圖片寬度來等比縮放 */ background-size:10%;/* 0％~100％之間的任何值，將背景圖片寬高按百分比顯示，當設置一個值的時候同也將其作為圖片寬度來等比縮放 */ background-size:cover;/* 將背景圖片等比縮放填滿整個容器 */ background-size:contain;/* 將背景圖片等比縮放至某一邊緊貼容器邊緣 */
屬性值：
| 值 | 描述 |
|---|---|
| length | 設置背景圖像的高度和寬度。 第一個值設置寬度，第二個值設置高度。 如果只設置一個值，則第二個值會被設置為 "auto"。 |
| percentage | 以父元素的百分比來設置背景圖像的寬度和高度。 第一個值設置寬度，第二個值設置高度。 如果只設置一個值，則第二個值會被設置為 "auto"。 |
| cover | 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。 背景圖像的某些部分也許無法顯示在背景定位區域中。 |
| contain | 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應內容區域。 |
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: url(img/5.jpg);
background-size: 100px 100px;
-moz-background-size: 100px 100px;
/* 老版本的 Firefox */
background-repeat: no-repeat;
padding-top: 80px;
}
</style>
</head>
<body>
<p>上面是縮小的背景圖片。</p>
<p>原始圖片：<br />
<img src="img/5.jpg" alt="Flowers"></p>
</body>
</html>關于怎么在css中設置背景圖片的大小問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
