background: 属性的子属性顺序

本文详细介绍了CSS中background属性的子属性顺序,包括background-color、background-image、background-repeat、background-attachment、background-position和background-size。通过实例展示了如何使用background属性一次性设置所有属性,以提高性能和兼容性。同时,解释了background-position的设置方式,可以指定方位词或具体数值来调整背景图像的位置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

background的子属性顺序为:

background-color,background-image,background-repeat,background-attachment,background-position,background-size。

实际应用中,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好。比如:

background:lightblue url(w3.png) no-repeat center fixed 

“lightblue” 是设置background-color;

“url(w3.png)” 是设置background-image;

“no-repeat” 是设置background-repeat;

“center” 是设置background-position;

“fixed” 是设置background-attachment,

各个设置项用空格隔开,有的设置项不写也是可以的,它会使用默认值。
 

向下滚动,因为设置了fixed,所以背景图片相对屏幕固定不动

以下来自转载:

background-position的设置,可以在水平方向设置“left”、“center”、“right”,在垂直方向设置“top”、“center”、“bottom”,除了设置这些方位词之外,还可以设置具体的数值。

比如说,我们想把下边的盒子用右边的图片作为背景,并且让背景显示图片中靠近底部的那朵花:


用上面中间那张图片作为左边那个比它尺寸小的盒子的背景,上面右边的实现效果设置为:“background:url(location_bg.jpg) -110px -150px”,

第一个数值表示背景图相对于自己的左上角 向左偏移110px,负值向左,正值向右,

第二个数值表示背景图相对于自己的左上角 向上偏移150px,负值向上,正值向下。

实现原理示意图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值