背景相关属性主要有: background-color背景颜色 background-image背景图片 background-repeat是否平铺repeat(默认平铺)|repeat-x(水平平铺)|repeat-y(垂直平铺)|no-repeat(不平铺) background-position背景位置length(百分数)|position(topcenterbuttonleftright)一般两个一起用,如果至指定一个方向另一个方向默认为center,两种方法也可以混搭。方位名词没有顺序区分,而使用百分数时时有顺序的,先是水平后是垂直 background-attachment背景固定还是滚动scroll|fixed background:背景颜色背景图片是否平铺背景固定还是滚动背景位置 #p1{ width:300px; height:300px; background-color:blue;/*默认是transparent透明的*/ /*background-color:transparent;*/ background-image:url(Images/2.jpg); background-repeat:no-repeat;/*不平铺,默认是水平垂直平铺*/ /*background-repeat:repeat-y;*/ /*background-repeat:repeat-x;*/ /*background-position:rightbottom;*/ background-position:10%center; background-attachment:fixed; } 想要背景半透明在指定颜色时使用rgba(r,gb,a),a就是指明透明度 p{ width:100%; height:300px; background-color:rgba(0,0,0,0.6); } 当要使用多张背景图片时使用background来指定多个url,每组之间用‘,’逗号隔开,若图片有重叠,则前一张覆盖后一张图片,但是整体背景颜色必须在最后一个url后指定。 p{ width:100%; height:300px; background:url(Images/2.jpg)no-repeatlefttop,url(Images/3.jpg)no-repeatrightbottomblue; } (责任编辑:蚂蚁团队) |