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属性不仅可以设置页面的背景色 还可以用于各种网页元素 如果给一个标题设置背景 可以如下设置 h1 font 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