background-size 设置背景图片尺寸

本文深入解析CSS中背景属性的使用技巧,包括background-size的各种值如auto、cover、contain及百分比设置的效果,背景重复属性round和space的作用,以及如何设置多背景和背景颜色补全效果。掌握这些细节,能让你的网页设计更加灵活和美观。
摘要由CSDN通过智能技术生成

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值