css之background

背景:background，把网页的背景设为图片

width 宽;

height 高;

background-color 颜色;

background-image:url(路径);(背景图默认铺满整个容器)

background-repeat:
no-repeat不重复,repeat-x x轴重复,
repeat-y y轴重复,repeat xy都重复(默认是repeat全铺满)

background-position：背景图位置

表达方式

1英文x轴：left center right; y轴：top center bottom
2数字(x,y) eg:(30px,50px),如果是0px,则px可以省略
3数字+英文(x,y),用数字或带单位的(px % em是单位就可以用);
写一个值时，第二个值默认为center；默认位置左上

background-attachment:fixed //固定在浏览器可视区域(scroll 可以滚动,默认)

background简写

background:color url(路径) no-repeat center center fixed;

总结：

1背景不会占用窗口宽高,也不会撑开容器的宽高。(当容器没有给宽高时,看不到背景图.)所以用背景图时一定给容器宽高。(有的标签有默认宽高的除外)

eg:<p style="background:url(../img/icon.png) no-repeat 0;">你好</p>

//p的宽是屏幕宽,高被字撑开;0即left center-此处没给宽和高,因为默认有宽高

//默认字和图片摞到一起---此处理解背景不会占用窗口宽高

2当给无明确宽高的容器加背景时,把容器设为行内元素较好。

1.png

 第一处给span加.

span{font-size:16px;background: url(1.png) no-repeat right 2px;padding-right: 19px;}

第二处也是给span加。

span{background: url(2.png) no-repeat 0;padding-left: 16px;}

原则：

考虑好是给块元素加还是给行内元素加

先让图和字摞一起， 然后靠padding挤过去

3如果同时有background-color和background-image,则图片image永远比颜色color层级高(即image在上面)

4当图片做为div背景时,div很小,图片大,则以div作为可视区大小---此外理解不会撑开容器宽高

eg:background-repeat与background-position应用

1.background-repeat:repeat-x;background-position:40px 0px;

//40px会往右移动40px,但空出来的部分不会是空白,会把此图片右半部分截出来40px显示出来.

2.background-repeat:repeat-x;background-position:center  0;

//图片放正中间，图片的前和后该留多少就留多少

3.background-repeat:repeat-y;background-position:0 20px;

//图片下移20px,空部分会截出该图的下部分显示

4.background-repeat:no-repeat;

//position默认是(0px,0px);(-100px,-20px)往左100px,往上20px