background复合属性顺序_CSSbackground属性background属性
属性解释
background属性是css中应⽤⽐较多，且⽐较重要的⼀个属性，它是负责给盒⼦设置背景图⽚和背景颜⾊的，background是⼀个复合属性，它可以分解成如下⼏个设置项：
background-color 设置背景颜⾊
background-image 设置背景图⽚地址
background-repeat 设置背景图⽚如何重复平铺
background-position 设置背景图⽚的位置
background-attachment 设置背景图⽚是固定还是随着页⾯滚动条滚动
实际应⽤中，我们可以⽤background属性将上⾯所有的设置项放在⼀起，⽽且也建议这么做，这样做性能更⾼，⽽且兼容性更好，⽐如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这⾥⾯的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是
设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项⽤空格隔开，有的设置项不写也是可以的，它会使⽤默认值。
举例：
下⾯这些例⼦使⽤下⾯这张图⽚做为背景图：
1、“background:url(bg.jpg)”，默认设置⼀个图⽚地址，图⽚会从盒⼦的左上⾓开始将盒⼦铺满。
2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒⼦，盒⼦其他部分显⽰背景颜⾊“cyan”。
3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒⼦，盒⼦其他部分显⽰背景颜⾊“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒⼦左上⾓对齐，盒⼦其他部分显⽰背景颜⾊“cyan”。
5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒⼦左中对齐，盒⼦其他部分显⽰背景颜
⾊“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒⼦右中对齐，也就是背景图⽚的右边对齐盒⼦的右边，盒⼦其他部分显⽰背景颜⾊“cyan”。
相关代码：
test background
例⼦说明：
background-position的设置，可以在⽔平⽅向设置“left”、“center”、“right”，在垂直⽅向设置“top”、“center”、“bottom”，除了设置这些⽅位词之外，还可以设置具体的数值。
⽐如说，我们想把下边的盒⼦⽤右边的图⽚作为背景，并且让背景显⽰图⽚中靠近底部的那朵花：
html如何设置图片滚动
⽤上⾯中间那张图⽚作为左边那个⽐它尺⼨⼩的盒⼦的背景，上⾯右边的实现效果设置为：“backgrou
nd:url(location_bg.jpg) -110px -150px”，第⼀个数值表⽰背景图相对于⾃⼰的左上⾓向左偏移110px，负值向左，正值向右，第⼆个数值表⽰背景图相对于⾃⼰的左上⾓向上偏移150px，负值向上，正值向下。
实现原理⽰意图：
对应代码：
test background
理解练习：
通过雪碧图制作如下布局：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。