css设置网页中的背景

《css设置网页中的背景》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章CSS设置网页中的背景1学习目标掌握CSS设置网页背景的方法。ppt中所有实例参考网页设计与制作电子教材及源代码24.1CSS设置背景颜色4.1.1页面背景色4.1.2用背景色给页面分块34.1.1页面背景色在HTML中，设置网页的背景颜色是利用标记的bgcolor属性，而在CSS中页面的背景颜色通过设置标记的background-color属性来实现。如文件Sample4-1.html所示：44.1.2用背景色给页面分块在H在CSS中background-color属性不仅可以设置页面的背景色，还可以用于各种网页元素，如果给一个标题设置背景，可以如下设置

2、：h1{font-family:黑体；color:white;/*设置标题文字颜色*/background-color:blue;}/*设置标题背景颜色*/因此很多网页都通过设定不同的HTML元素的各种背景色来实现分块的目的。如文件Sample4-2.html所示：54.2设置背景图像4.2.1页面的背景图像4.2.2背景图像的重复4.3.3设置背景图像的位置4.3.4固定背景图像位置4.3.5背景样式综合设置64.2.1页面的背景图像在CSS中给页面添加背景是通过给标记设置background-image属性，直接定义其url值来实现，其中url值可以是网站的绝对路径，也

3、可以是相对路径。如文件Sample4-3.html所示：背景图像是透明的GIF格式图像(2.gif)，如果同时设置页面背景颜色background-color,则背景会透过图像的透明部分，与图像同时产生效果。74.2.2背景图像的重复在上例中，背景图像都是直接重复地铺满整个页面，即图像自动沿水平和垂直两个方向平铺。实际上在CSS中可以通过ba

4、ckground-repeat属性设置图像的重复方式，包括水平重复、垂直重复和不重复。其属性值有：reapeat：沿水平和垂直两个方向平铺，默认值no-reapeat:不平铺repeat-x：水平方向重复repeat-y：垂直方向重复缺省值为repeat如文件Sample4-4.html所示：84.3.3设置背景图像的位置在背景图像设为不平铺情况下背景图像将显示在页面元素的左上角。如果不希望这样，在CSS中可以设置background-position属性设置图像的位置。如文件Sample4-5.html所示：background-position的值有：垂直位置vertical，指定

5、top,center,bottom和具体数值、百分比；水平位置horizontal，指定left,center,right和具体数值、百分比。定义背景图像的绝对或相对位置显示。例如：background-position的值可以设置为topleft、topcenter、topright、centerleft、centerright、bottomright、等等。background-position:20px50px;94.3.4固定背景图像位置对于大幅的背景图像，当浏览器出现滚动条时，通常不希望图像随着文字的移动，而是固定在一个位置。在CSS中可以通过设置background-att

6、achment属性来实现。其属性值有：scroll（随对象一起滚动）,fixed（固定），缺省值为scroll。该属性指定对象的背景图像是否与对象一起滚动，或是固定在页面上的某一个位置。这个属性与background-image组合使用。104.3.5背景样式综合设置与border和font属性一样，background也可以将各种关于背景的设置集成到一条语句上如下：background-image:url(bg5.jpg);/*背景图片*/background-color:blue;background-repeat:no-repeat;/*不重复*/background-attac

7、hment:fixedbackground-position:300px25px;/*背景位置，具体数值*/可以写成下面的形式：background:url(bg5.jpg)blueno-repeatfixed300px25px114.3实例背景综合一：我的个人主页(Sample4-6.html)背景综合二：古词《念奴娇•赤壁怀古》(Sample4-7.html)12