CSS设置网页中的背景.ppt

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