在CSS中,我們可以通過設置背景圖大小來實現背景圖的縮放。下面來介紹一些常用的方法。
/* 設置背景圖為原大小 */ background-size: auto; /* 設置寬度為100%,高度自適應 */ background-size: 100% auto; /* 設置高度為100%,寬度自適應 */ background-size: auto 100%; /* 設置寬度為100%,高度保持原比例縮放 */ background-size: 100%; /* 設置高度為100%,寬度保持原比例縮放 */ background-size: contain; /* 設置寬度和高度都100%,可能會導致變形 */ background-size: 100% 100%; /* 設置寬度和高度都按照指定值進行縮放 */ background-size: 500px 300px;
上述代碼中,我們通過設置background-size屬性來控制背景圖的大小。其中,auto表示原大小,100%表示設置為父容器的100%。contain表示讓背景圖縮放后完全放入容器內,有可能會留白。而cover則表示讓背景圖縮放后完全覆蓋容器,有可能會裁剪部分圖像。
需要注意的是,在設置背景圖大小時,我們可以同時指定寬度和高度,也可以只指定一個值,此時另一個值將自動根據原圖片比例計算。
上一篇css中無序文字頂頭
下一篇html 設置字符間距