CSS提供了多背景圖片的功能,可以讓頁面更加豐富多彩。但是,背景圖片的大小調(diào)節(jié)可能需要一些技巧。
首先,我們需要使用background-size屬性來設(shè)置背景圖片的尺寸。
div{ background-image: url("img1.jpg"), url("img2.jpg"); background-size: 50% 50%, cover; background-position: left top, center center; background-repeat: no-repeat; }
在這個例子中,我們給div加上了兩張背景圖片,分別是img1.jpg和img2.jpg。我們使用了50% 50%這個值來設(shè)置第一張圖片的尺寸。這個值表示圖片的寬和高都是容器的50%。同時,我們使用了cover這個值來設(shè)置第二張圖片的尺寸。這個值表示背景圖片會被自動縮放,直到它完全覆蓋容器。
除此之外,我們還可以使用background-attachment屬性來設(shè)置背景圖片的滾動效果。
div{ background-image: url("img1.jpg"), url("img2.jpg"); background-size: 50% 50%, cover; background-position: left top, center center; background-repeat: no-repeat; background-attachment: fixed, scroll; }
在這個例子中,我們?yōu)椴煌谋尘皥D片設(shè)置不同的背景滾動效果。第一張圖片使用fixed這個值,表示它會固定在屏幕上,不隨頁面的滾動而移動。而第二張圖片使用scroll這個值,表示它會隨頁面的滾動而移動。
總之,調(diào)節(jié)多背景圖片的大小需要我們靈活運用background-size和background-attachment屬性,以及合適的圖片尺寸和位置設(shè)置。
上一篇css頁腳怎么加