background-size 设置背景图片尺寸

background-size 有三个属性
auto :背景图片的真实大小

cover: 背景图片等比例缩放到铺满盒子

contain:背景图片拉伸以适应盒子大小

还可以直接设置大小 backgroun-size:100% 100%; 当写一个100%的时候只有宽适应 上下出现留白

当设置两个100%的时候等于cover

背景重复
round 如果背景图片在平铺的时候 有部分区域被截取 round会将图片本身缩小 以达到完全显示图片的目的

space 在水平方向上和竖直方向上 能平铺多少张图片就平铺多少张图片 剩余的空隙平均分配多背景

背景还可以设置多背景
.el {

background:

    url(img/bg1.png) no-repeat left top,

    url(img/bg2.png) no-repeat right top,

    url(img/bg3.png) no-repeat left bottom,

    url(img/bg4.png) no-repeat right bottom;

}#

或者让背景色补全背景图片达不到的地方

background: #ccc url(img/bg1.bng)left center;

看见方位词想起来了 当写一个center的时候 另一个方位词不写 默认是center

猜你喜欢

转载自blog.csdn.net/meikaied/article/details/85099837