第9讲设置网页背景.ppt

陕西新华电脑软件学校-电子商务教研组
第9讲设置网页背景
陕西新华电脑软件学校-电子商务教研组
任务一网页背景色的设置
任务三背景图片的位置设置(重点)
网页背景设置
教学重难点
任务二网页背景图片的设置
任务四背景样式综合设置(重难点)
2
陕西新华电脑软件学校-电子商务教研组
任务一网页背景色
页面的背景颜色:background-color
语法:
body{background-color:red;}
实例:网页背景色
3
陕西新华电脑软件学校-电子商务教研组
背景颜色不仅可以设置网页的整体背景颜色,同时网站经常用它来设置页面分块的技巧
实例:背景色分块
4
陕西新华电脑软件学校-电子商务教研组
任务二页面的背景图
网页可以设置背景颜色,同样也可以设置背景图像
语法:background-image:url();
实例:网页背景图
5
陕西新华电脑软件学校-电子商务教研组
网页背景图的重复
属性: background-repeat
语法:background-repeat:repeat-y;
属性值:repeat-y/repeat-X/no-repeat/inherit
实例:背景图重复
6
陕西新华电脑软件学校-电子商务教研组
任务三背景图片的位置
属性: background-position
值:center/right/left/inherit/bottom
实例:背景图片的位置
背景图片的位置1
7
陕西新华电脑软件学校-电子商务教研组
固定背景图像就是指图像不跟着文字的移动而移动
属性:background-attachment
值:fixed/scroll/inherit
实例:固定背景图片
8
陕西新华电脑软件学校-电子商务教研组
很多时候希望给页面添加多个背景,而在CSS中一个标记只能用一次background属性,因此只有给多个标记添加不同背景来实现类似的效果
实例:多个背景
9
陕西新华电脑软件学校-电子商务教研组
任务四背景样式综合设置
background:#e9fbff url() no-repeat bottom right;
实例:个人主页
10