Web前端开发任务式教程（HTML5+CSS3）（微课版） 课件模块6 元素背景.pptx

《Web前端开发任务式教程》 模块6元素背景

《Web前端开发任务式教程》元素背景背景是网页非常重要的样式，本模块介绍元素的背景属性，包括图像背景、渐变背景、背景重复、背景尺寸，以及图像精灵等属性。任务6.1设计展板的详情任务6.2优化展板设计

元素背景学习目标【知识目标】1）掌握图像背景、渐变背景、图像精灵属性的用法。2）掌握opcity属性的用法。【能力目标】1）能够使用图像背景属性设计网页背景。2）能够使用图像精灵技术优化网络访问效率。《Web前端开发任务式教程》

本任务完善任务5.2，添加工匠详细事迹展示，让学习落到实处，有迹可循，有章可依。任务要求如下。1）小图像图标显示4个工匠的索引。2）当鼠标悬停于图标索引时，详情显示指定工匠的事迹和索引图的大图。3）详情显示区域使用渐变背景。设计完成的显示效果如图6-1所示，图6-1a为初始显示效果，图6-1b为第2个工匠的详情展示。元素背景任务6.1设计展板的详情《Web前端开发任务式教程》

元素背景《Web前端开发任务式教程》a)初始显示效果b)显示第2个工匠的详情图6-1展板详情

元素背景6.1.1图像背景1.background-image属性取url()函数值background-image属性取不同的函数值能够实现不同的背景效果，当取值为url(URL)函数时，定义元素的图像背景，参数URL规定图像的路径。2.opacity属性opacity属性设置元素的不透明度级别，属性取值说明如表6-1所示。为绿色设置不同的不透明度值的效果如图6-2所示，值为0.1的不透明度最小，颜色最浅。表6-1opacity属性取值《Web前端开发任务式教程》图6-2不透明度效果属性值说明number设置不透明度值，取值从0.0（完全透明）到1.0（完全不透明）inherit从父元素继承值

元素背景【例6-1】使用背景显示3幅图像，并使用不透明度模糊图像，网页显示效果如图6-3所示。《Web前端开发任务式教程》与使用img元素显示图像不同，使用div元素结合背景属性显示图像时，div元素的宽度和高度都必须设置。图6-3具有不同透明度值的图像

元素背景6.1.2渐变背景渐变能够实现在两个或多个指定颜色之间的平滑过渡，在背景设计中具有非常好的显示效果，当background-image属性取值为linear-gradient()渐变函数时，能够实现背景颜色的线性渐变。1.预定方向渐变颜色可以沿着预定的方向线性地发生变化，如图6-4所示，从上到下，颜色由红色逐步变化到黄色就是一种预定方向的线性渐变，方向还可以从左到右、沿对角方向等。当background-image属性的取值为linear-gradient(direction,color-stop1,color-stop2,...)函数时，定义预定方向的渐变，函数参数说明如表6-2所示。【例6-2】编码实现图6-4所示的线性渐变效果。《Web前端开发任务式教程》参数说明direction规定渐变的方向，取值说明如下。tobottom：从上到下渐变，默认值。totop：从下到上渐变。toleft：从右到左渐变。toright：从左到右渐变。tobottomright：从左上到右下对角线方向渐变color-stop1，color-stop2,...颜色节点，可以定义不少于2个的颜色节点，会依次逐步过渡到指定的节点颜色图6-4线性渐变表6-2linear-gradient(direction,color-stop1,color-stop2,...)函数参数

元素背景2.任意角度渐变预定义方向的渐变是基于特殊角度值的颜色渐变，如果希望对渐变方向自由控制，可以用角度值取代预定义的方向定义线性渐变，角度值说明如图6-5所示。从下到上（totop）的线性渐变对应于0deg；从左到右（toright）的线性渐变对应于90deg；从上到下（tobottom）的线性渐变对应于180deg。当background-image属性的取值为linear-gradient(angle,color-stop1,color-stop2,...)函数时，定义指定角度方向的线性渐变。函数参数说明如表6-3所示。表6-3linear-gradient(angle,color-stop1,color-stop2,...)函数参数《Web前