为元素添加多个background-image

来源:互联网 发布:韩国女演员排行知乎 编辑:程序博客网 时间:2024/06/05 19:36

比较常见需求的就是为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% ;}

不同尺寸窗口的效果图:
大窗口:
这里写图片描述

小窗口:
这里写图片描述

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

0 0