CSS设置网页中的背景

单击此处编辑母版标题样式,*,第,4,章,CSS设置网页中的背景,1,学习目标,掌握,CSS,设置网页背景的方法。,ppt,中所有实例参考,网页设计与制作电子教材及源代码,2,4.1,CSS设置背景颜色,4.1.1,页面背景色,4.1.2,用背景色给页面分块,3,4.1.1,页面背景色,在HTML中，设置网页的背景颜色是利用,标记的,bgcolor,属性，而在CSS中页面的背景颜色通过设置,标记的,background-color,属性来实现,。,如文件,Sample4-1.html,所示：,4,4.1.2,用背景色给页面分块,在H,在,CSS,中,background-color,属性不仅可以设置页面的背景色，还可以用于各种网页元素，如果给一个标题设置背景，可以如下设置：,h1,font-family:,黑体；,color:white,;/*,设置标题文字颜色*,/,background-,color:blue,;/*,设置标题背景颜色*,/,因此很多网页都通过设定不同的,HTML,元素的,各种背景色来实现 分块的目的。,如文件,Sample4-2.html,所示：,5,4.2,设置背景图像,4.,2,.1,页面的背景图像,4.2.2,背景图像的重复,4.3.3,设置背景图像的位置,4.3.4,固定背景图像位置,4.3.5,背景样式综合设置,6,4.2.1,页面的背景图像,在CSS中给页面添加背景是通过给,标记设置,background-image,属性，直接定义其url值来实现，其中url值可以是网站的绝对路径，也可以是相对路径,。,如文件Sample4-3.html所示：,背景图片,背景图像是透明的GIF格式图像(2.gif)，如果同时设置页面背景颜色background-color,则背景会透过图像的透明部分，与图像同时产生效果。,7,4.2.2,背景图像的重复,在上例中，背景图像都是直接重复地铺满整个页面，即图像自动沿水平和垂直两个方向平铺。实际上在CSS中可以通过background-repeat属性设置图像的重复方式，包括水平重复、垂直重复和不重复,。,其属性值有,：,reapeat：沿水平和垂直两个方向平铺，默认值,no-,reapeat:不平铺,repeat-x：,水平方向重复,repeat-y：,垂直方向重复,缺省值为,repeat,如文件,Sample4-4.html,所示：,8,4.3.3,设置背景图像的位置,在背景图像设为不平铺情况下背景图像将显示在页面元素的左上角。如果不希望这样，在,CSS,中可以设置,background-position,属性设置图像的位置,。,如文件,Sample4-5.html,所示：,background-position,的值有：垂直位置,vertical,，指定,top,center,bottom,和具体数值、百分比；水平位置,horizontal,，指定,left,center,right,和具体数值、百分比。定义背景图像的绝对或相对位置显示。,例如：,background-position,的值可以设置为,top left,、,top center,、,top right,、,center left,、,center right,、,bottom right,、等等。,background-position,:20px 50px;,9,4.3.4,固定背景图像位置,对于大幅的背景图像，当浏览器出现滚动条时，通常不希望图像随着文字的移动，而是固定在一个位置。在,CSS,中可以通过设置,background-attachment,属性来实现。,其属性值有：,scroll,（随对象一起滚动）,fixed,（固定），,缺省值为,scroll,。该属性指定对象的背景图像是否与对象一起,滚动,，或是固定在页面上的某一个位置。这个属性与,background-image,组合使用。,10,4.3.5,背景样式综合设置,与border和font属性一样，background也可以将各种关于背景的设置集成到一条语句上如下,：,background-image:url(bg5.jpg);/*,背景图片,*/,background-,color:blue,;,background-,repeat:no,-repeat;/*,不重复,*/,background-,attachment:fixed,background-position:300px 25px;/*,背景位置，具体数值,*/,可以写成下面的形式,：,background:url(bg5.jpg)blue no-repeat fixed 300px 25px,11,4.,3,实例,背景综合一：我的个人主页,(Sample4-6.html,),背景综合二：古词,念奴娇,赤壁怀古,(Sample4-7.html,),12,