CSS的背景
背景颜色
background-color: transparent | rgb(0,0,0) | bgra(255,255,255,0.5)
transparent为默认值,即透明。
bgra中最后一个值为alpha不透明度,在0~1之间,通常可以将0.5
写为.5
设置透明度时盒子中的其它属性如文字图片不受影响。
背景图片
background-image
属性描述元素的背景图像。常用于logo或一些装饰小图片或者超大背景图。方便控制位置。
background-image: none | url(图片url路径)
|
表示或者,使用一个属性值即可。
none为无背景图,为默认值。
背景平铺
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
默认值为repeat,即平铺整个盒子。
no-repeat为不平铺,repeat-x和repeat-y分别是x轴平铺忽然y轴平铺。
使用背景图片后仍然可以设置盒子颜色。
背景图片位置
background-position: x, y;
background-position: left top;
background-position: 20px 50px;
x与y的值可以是精确数字,也可以是方位名词,例如x的方位名词有:left,center,right。
y的方位名词有:top,center,bottom。
- 若x,y都是方位名词,则x,y的前后书写顺序随意,且只写一个方位名词时另外一个默认为center居中。
- 若x,y为精确值,则x在前,y在后。单位为
px
,若只指定一个值,则该值一定为x坐标,另一个值默认垂直居中。 - 若x,y为混合单位,即一个为方位名词另一个为精确值,则x在前,y在后。
背景图像固定
background-attachment: scroll | fixed
background-attachment属性设置背景图像是否固定或者随页面剩余部分滚动。
scroll(默认值)是随页面剩余部分滚动,fixed是背景图像固定。
背景属性复合写法
可以将各个背景属性写成一行,没有特定的书写顺序,一般顺序为:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
background: transparent url(image.jpg) repeat fixed top;