CSS中,背景尺寸(background-size)是用來控制背景圖片的大小的屬性。通過指定背景尺寸,我們可以控制背景圖片的放置方式和縮放比例。
// 背景尺寸語法 background-size: length|percentage|cover|contain|initial|inherit;
長度(length)和百分比(percentage)可以指定背景圖像相對于容器的寬度和高度的大小。例如:
// 背景圖片寬度設置為容器寬度的50%,高度設置為容器高度的20% background-size: 50% 20%;
單個值可以同時設置背景圖像的寬度和高度,如果只設置一個值,另一個值將自動按比例縮放:
// 設置背景圖像寬度為容器寬度的30%,高度自動按比例縮放 background-size: 30%;
同時,CSS提供了兩個特殊的值,可以讓背景圖像保持原有的寬高比:
- cover:將背景圖像縮放到容器的大小,并保持原始的寬高比。這通常會導致圖片的某一邊超出容器的范圍,因此背景圖像可能只是部分可見。
- contain:將背景圖像縮放到容器的大小,并保留其原始寬高比。在這種情況下,該圖像不會超出容器的范圍。
// 將背景圖像縮放到容器大小,并保持原始寬高比 background-size: cover; // 也可以寫成 background-size: contain;
可以使用initial和inherit取值來重置和繼承background-size屬性。比如:
// 重置背景圖片的尺寸為默認值 background-size: initial; // 繼承父元素的背景圖片尺寸 background-size: inherit;
總之,通過設置背景尺寸,可以方便地控制圖片的大小和放置方式,讓網頁視覺效果更加鮮明。