项目一 第二阶段 任务13 美化页面元素背景-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用CSS3设置网页格式 第二阶段 能使用CSS的background-color属性设置标签的纯色背景。 能使用background各个属性设置背景图像及其样式效果。 能使用linear-gradient、radial-gradient为背景添加渐变效果。 能使用background的相关属性设置多背景图像效果。 综合运用背景样式设置D清单页面元素背景。 任务目标 任务13 美化页面元素背景 本次任务要求根据D清单页面效果图，使用CSS样式代码，在任务12的基础上美化网页元素背景。 任务包括： 1、D清单页面中的home、apply、member、contact模块设置对应的背景样式。 2、member模块背景图片铺满整个模块，并相对于窗体固定。 3、根据不同的背景色去修改文字的颜色及水平线的设置。 任务描述 任务13 美化页面元素背景 要完成D清单页面元素的背景美化，需要： 学习添加背景颜色、背景图片的CSS语法； 学习设置背景图片相关样式的语法； 分析D清单页面中的元素背景，正确选择及使用相关的背景样式完成D清单网页中的各元素背景效果。 D清单网页背景效果分析如图2-4-1所示。 任务分析 任务13 美化页面元素背景 任务分析 图2-4-1 D清单美化元素背景网页效果图 任务13 美化页面元素背景 知识与技能准备 background-color属性设置元素的背景颜色，该属性是设置元素的一种纯色的颜色。这个属性会填充元素的内容、内边距和边框区域。 语法：background-color:transparent|color; transparent：默认值，透明色。 取值：颜色关键词|十六进制颜色值|RGB色|RGBA色 颜色关键词：如red、green、blue等颜色对应的英文单词。 十六进制颜色值：如#FF0000、#0F0等以#开头的十六进制数值。 RGB色：如rgb(255,0,0)、rgb(0,255,0)、rgb(0,0,255)等rgb代码的颜色值。 RGBA色：和RGB相似，但比RGB多了一个透明的参数值，透明的参数值取值范围是0~1之间，如rgba(255,0,0,0.5)。 1、background-color：背景颜色 课堂练习2-4-1使用背景颜色属性设置背景颜色 HTML代码： CSS代码： 1 2 背景颜色<br> background-color:paleturquoise; 1 2 3 body{ background-color: paleturquoise; } 使用背景颜色属性设置背景颜色。 显示效果如图2-4-2所示： 图2-4-2 背景颜色效果 知识与技能准备 background-image属性设置元素的背景图像，这个属性占据了元素的内边距和边框区域，但不包括外边距。如果同时设置了背景图像和背景颜色，背景图片会覆盖背景颜色。背景图像默认位于所设置元素的左上角，并在水平和垂直方向上重复。 取值：默认值是none，图片路径可以是绝对或相对路径。而这里的相对路径是相对于样式表的。一般网站都会建一个图片文件夹images（或img），将图片都放在该文件夹中，建一个样式CSS文件夹，用于存放样式文件，如图2-4-3所示的文件夹结构，则地址应该写为“url(images/test.jpg)”。 图2-4-3 网站结构图 注意：背景图片中的URL导入的图像可以是任意类型的，但是符合网页显示的格式一般为jpg、gif和png。 2、background-image：背景图像 语法：background-image: url(图片路径) ; 使用背景颜色属性设置背景颜色。 课堂练习2-4-2 使用背景图像属性设置背景图像 HTML代码： CSS代码： 1 background-image:背景图像 1 2 3 body{ background-image: url(images/img.jpg); } 显示效果如图2-4-4所示： 图2-4-4 背景图像效果 知识与技能准备 background-repeat属性设置元素背景图像的显示方式是否重复及如何重复，该属性默认状态下背景图像是在水平和垂直方向上进行重复。 取值：repeat-x | repeat-y | repeat | no-repeat repeat：默认状态，背景图像水平和垂直方向重复 repeat-x：背景图像水平方向重复 repeat-y：背景图像垂直方向重复 no-repea