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,负值向上,正值向下。
实现原理示意图: