background-color
说明:该属性为元素设置背景色,填充区域包括内容区,内边距,边框。默认值transparent
表示透明,属性值可以是颜色名字(如red),可以是十六进制表示(如#ff0000),可以用RGB表示如(rgb(255, 0, 0)),可以是关键字inherit
继承父元素的背景色。
background-attachment
body {
background-image: url('a.jpg');
background-attachment: fixed;
}
说明:该属性规定背景图片是否随着页面滚动。默认值scroll
表示背景图会随着页面滚动,fixed
表示不随页面的滚动而滚动,inherit
表示继承父元素的值。
background-image
body {
background-image: url('a.jpg');
}
说明:定义元素的背景图,背景图的大小占据元素的内容区,内边距和边框。图片默认从左上角开始,如果图片太小就会自动在水平和垂直方向上平铺,直到占据整个元素的区域。none
是默认值,url
指定图像路径,inherit
继承父元素的值。
background-position
说明:定义背景图片的起始位置。属性值可以是以下关键字:top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
关键字的第一个值表示背景图在垂直方向上的位置,第二个值表示背景图在水平方向上的位置,第二个值默认是center
。
属性值可以用百分比表示,例如background-position: 50% 30%;
第一个表示水平方向上的距离(图片左上角距离左边的距离),第二个肯定是垂直方向上的距离(图片左上角距离顶部的距离),切记它和使用关键字所代表的意思是相反的。0% 0%
相当于关键字top left
, 50% 50%
相当于center
, 100% 100%
相当于bottom right
。百分比是依据图像在容器中的空白距离划分的,值不仅可以为正值,当值为负数时图片相当于向上和向左移动的距离。
属性值当然也可是像素,例如background-position: 50px 30px;
具体含义同百分比相同,只是采用了绝对距离。
我用下面这个图片实现了一个精灵图,它的主要原理就是背景图片定位:
例5就是最终的效果
background-repeat
body {
background-image: url('a.jpg');
background-position: no-repeat;
}
说明:背景图像的平铺模式。repeat
是默认值,即图像会在水平和垂直方向上平铺。repeat-x
图像只在水平方向上屏幕。repeat-y
图像只在垂直方向上平铺。no-repeat
图像不进行平铺,最常用的一个值。inherit
继承父元素的值。
background-clip
说明:规定背景绘制的区域。无论是背景色还是背景图片上面已介绍过,背景区域包括内容区,内边距,边框;该属性可以改变背景区域,默认值border-box
表示背景区域包括内容区,内边距和边框。padding-box
背景区包括内容区和内边距。content-box
背景区域只包括内容区域。
background-origin
说明:规定background-position属性相对于什么位置定位。上面的background-position例子中可以看到,边框是没有背景图的,这是因为background-origin
的默认值是padding-box
,即背景图是相对于内边距来定位的,border-box
表示背景图相对于边框来定位,content-box
背景图相对于内容区来定位。
background-size
说明:规定背景图片的大小。默认值auto
表示自身大小。属性值的单位可以是像素,例如background-size: 100px 100px
,第一个值宽度,第二个是高度,当只设置一个值时,第二个值默认是auto
,浏览器根据宽度自动计算出高度。单位可以是百分比,百分比是相对于父容器的宽高,第一个值设置宽度,第二个设置高度,当只有一个值时第二个值默认为auto。属性值cover
表示覆盖整个容器的区域,图片太小就会等比例拉伸,太大就会把多余部分裁减掉,这就导致图像的某些部分可能无法显示在容器中。contain
表示图像在容器内等比例缩放,直到宽度或者高度填满容器为止,这个值还是挺常用的。
background
说明:这是一个简写属性,它是以下属性的简写:
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
官方没有强制要求属性顺序,但是我们通常按照上面的排序写,例如:background: #ff0000 url('a.jpg' center / 20px no-repeat)
,使用简写是一个很好的习惯。