在網頁設計中,背景圖能夠起到很好的裝飾效果,但是如果背景圖過大或者過小,會影響網頁的美觀性。使用CSS可以控制背景圖的大小,來適應網頁的要求。以下為CSS控制背景圖的大小的方法。
background-size: cover; /*使背景圖填充滿整個區域*/ background-size: contain; /*使背景圖盡可能地涵蓋整個區域*/ background-size: 100% 100%; /*使背景圖按照其原始大小顯示*/ background-size: auto; /*使背景圖等比例縮放,適應容器大小*/
解釋:
- background-size: cover:使背景圖填充滿整個區域,可能會被剪裁掉一部分。
- background-size: contain:使背景圖盡可能地涵蓋整個區域,寬高比可能會變化,保持原始圖片的寬高比。
- background-size: 100% 100%:使背景圖按照其原始大小顯示。
- background-size: auto:使背景圖等比例縮放,適應容器大小。
使用控制背景圖大小的方法,能夠讓背景圖更好地適應頁面,以達到美化網頁的效果。