第4章 CSS设置网页中的背景.pptxVIP

第4章 CSS设置网页中的背景 学习目标 掌握CSS设置网页背景的方法。 ppt中所有实例参考网页设计及制作电子教材及源代码 2 4.1 CSS设置背景颜色 4.1.1 页面背景色 4.1.2 用背景色给页面分块 4.1.1 页面背景色 在HTML中，设置网页的背景颜色是利用body标记的bgcolor属性，而在CSS中页面的背景颜色通过设置body标记的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背景样式综合设置 4.2.1 页面的背景图像 在CSS中给页面添加背景是通过给body标记设置background-image属性，直接定义其url值来实现，其中url值可以是网站的绝对路径，也可以是相对路径。 如文件Sample4-3.html所示： html head title背景图片/title style !-- body{ background-image:url(2.gif); /* 页面背景图片 */ } -- /style /head body/body/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) b