1、 css背景属性列表
background
简写属性,作用是将背景属性设置在一个声明中
background-color
设置元素的背景颜色
background-image
把图像设置为背景
background-position
设置背景图像的起始位置
background-repeat
设置背景图像是否及如何重复
background-attachment
背景图像是否固定或者随着页面的其余部分滚动
2.background-position详解
方法一:使用一些关键字,如top bottom left right center,通常这些关键字会成对出现。其作用如其名称所标明,例如:top right将背景图片定位于元素的右上角。根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字——一个对应水平方向,另一个对应垂直方向。如果只出现一个关键字,则认为另一个关键字是center。
方法二:使用百分数值,百分数值的表现方式更为复杂。假设希望用百分数值将图像在其元素中,这很容易background-position:50% 50%等价于background-position:center,其中心与元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说图像的中心点与元素的中心点对齐。
注意:如果使用值,第一个值代表水平方向,第二个值代表垂直方向。
思考:background-position:0% 0%与background-position:100% 100%的显示效果为什么?
Background-position:66% 33%
注:background-position的默认值为0% 0%,在功能上相当于top left,这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺。并且百分比与关键字相同,都是元素某个点与背景图片某个点的对齐。
方法三:长度值,长度值解释的是元素内边距距左上角的偏移。偏移点是图像的左上角。如果。设置值为50px 100px,图像的左上角将在元素内边距区左上角向右50px,向下100px的位置上。