为元素添加多个background-image

时间:2022-11-03 08:53:32

比较常见需求的就是为body添加多个背景图片,而且需要他们有着不同的定位。

我们需要单独定义元素的background-imagebackground-size属性,比如:

body{
background-image: url(get1.png),url(button_bg.png);
background-position: center center, bottom center;
background-repeat: no-repeat, no-repeat;
background-size: auto,100% ;
}

不同尺寸窗口的效果图:
大窗口:
为元素添加多个background-image

小窗口:
为元素添加多个background-image

可以看到,底部的图片会成比例的填充底部区域,而中间的图片则始终位于*位置,且大小不变。