HTML5允許在一個元素上設置多重背景,這意味著我們可以在同一個元素上疊加多張背景圖像,通過設置位置和大小,讓它們呈現出一種特殊的效果。
.multibg{ background-image: url(bg1.jpg), url(bg2.jpg); background-position: left top, right bottom; background-size: 50%, cover; background-repeat: no-repeat; }
以上代碼中,我們使用了background-image
來添加兩張背景圖片,用逗號隔開,表示多個圖像。接下來,我們利用background-position
來設置每張圖片的位置,對應的位置也是用逗號隔開。這里我們設置了第一張圖在左上角,第二張圖在右下角。
然后,我們用background-size
來分別對每個背景圖片做大小調整。在這個例子中,第一張背景圖的大小設置為原圖的50%,而第二張背景圖的大小設置為覆蓋整個元素。
最后,我們使用background-repeat
來確保每張背景圖僅出現一次,并且不重復平鋪。
這是一個簡單的示例,你可以通過設置位置、顏色、圖層透明度等屬性去控制背景疊加效果的特殊效果。
上一篇html5設置大小
下一篇html5設置垂直居中