《CSS设置网页中的背景》由会员分享，可在线阅读，更多相关《CSS设置网页中的背景（12页珍藏版）》请在金锄头文库上搜索。
1、第4章 CSS设置网页中的背景1学习目标l掌握CSS设置网页背景的方法。lppt中所有实例参考网页设计与制作电子教材 及源代码 24.1 CSS设置背景颜色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值来实现
3、，其中url值可以是网站的绝对路径，也可以是相对路径。 如文件Sample4-3.html所示：背景图片背景图像是透明的GIF格式图像 (2.gif)，如果同时设置页面背景颜 色background-color,则背景会透 过图像的透明部分，与图像同时产 生效果。74.2.2背景图像的重复在上例中，背景图像都是直接重复地铺满整个页面，即图像自动沿水平和垂 直两个方向平铺。实际上在CSS中可以通过background-repeat属性设置图像 的重复方式，包括水平重复、垂直重复和不重复。 其属性值有： reapeat：沿水平和垂直两个方向平铺，默认值 no-reapeat:不平铺 repeat-
4、x： 水平方向重复 repeat-y： 垂直方向重复 缺省值为repeat 如文件Sample4-4.html所示：84.3.3设置背景图像的位置在背景图像设为不平铺情况下背景图像将显示在页面元素的左上 角。如果不希望这样，在CSS中可以设置background-position 属性设置图像的位置。 如文件Sample4-5.html所示：background-position的值有：垂直位置vertical，指定top, center, bottom和具体数值、百分比；水平位置horizontal，指定left, center, right 和具体数值、百分比。定义背景图像的绝对或相对位置
5、显示。 例如： background-position的值可以设置为top left、top center、top right、 center left、center right、bottom right、等等。background-position: 20px 50px;94.3.4固定背景图像位置对于大幅的背景图像，当浏览器出现滚动条时，通常不 希望图像随着文字的移动，而是固定在一个位置。在 CSS中可以通过设置background-attachment属性来实 现。 其属性值有：scroll（随对象一起滚动）, fixed（固定） ，缺省值为scroll。该属性指定对象的背景图像是否与对
6、 象一起滚动，或是固定在页面上的某一个位置。这个属 性与background-image组合使用。 104.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 25px114.3 实例l背景综合一：我的个人主页 (Sample4-6.html )l背景综合二：古词念奴娇 赤 壁怀古(Sample4-7.html )12
