《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 15.背景属性

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1背景颜色02背景图片03背景平铺04背景位置目录contents05背景图像固定/附着06背景连写07背景尺寸08多重背景09背景渐变目录contents10精灵图PART1背景颜色问题1：问题1：颜色的表示方式有几种？问题2：颜色的表示方式分别是？background-color书写定义了元素的颜色语法：background-color：颜色值；默认背景颜色值是transparet（透明）颜色值可以是：颜色单词：red、pink、deepblue...十六进制:#f2f2f2、#ccc...RGB值:rgb(100%,80%,0%)、rgb(255,0,0)rgba:rgba(0,0,0,.5)背景颜色(background-color)背景颜色(background-color)rgba和opacity的相同点：rgba最后一个参数是alpha透明度和opacity一样，取值范围0到1之间的浮点数值其中0表示完全透明，1表示完全不透明rgba和opacity的区别：rgba:只能用于设置背景颜色的透明度，不能用于背景图片和其他元素opacity：可以设置背景图像的透明度，以及其他元素的透明度PART2背景图片background-image属性描述元素的背景图像语法：

background-image:none|url(url)

背景图片（background-image）参数值作用none无背景图（默认的）url使用绝对或相对地址指定背景图像CSS3中background-image属性可以和background-color连用背景图片会压在背景颜色上面（1）当图片不重复，图片覆盖不到的地方都会被背景色填充；（2）当背景图片平铺时，则会覆盖背景颜色。div{height:900px;

background-color:deepskyblue;background-image:url(imgs/taiyang.png);background-repeat:no-repeat;background-size:200px;}背景图片（background-image）PART3背景平铺语法：background-repeat:repeat|no-repeat|repeat-x|repeat-y背景平铺（repeat）参数参数值repeat背景图像在纵向和横向上平铺（默认的）no-repeat背景图像不平铺repeat-x背景图像在横向上平铺repeat-y背景图像在纵向平铺背景平铺（repeat）repeat（默认的）no-repeatrepeat-xrepeat-y背景图像在纵向和横向上平铺背景图像不平铺背景图像在横向平铺背景图像在纵向平铺PART4背景位置background-position：lengthlength：百分数|由浮点数字和单位标识符组成的长度值。如：background-position:positionposition:top|center|bottom|left|center|right说明：背景位置(position)语法格式：设置对象的背景图像位置,必须先指定background-image属性，默认值为：(0%0%)。如果只指定了一个参数值，该值将用于横坐标X，纵坐标Y将默认为50%。如果只指定了两个参数值，第一个值将用于横坐标X，第二个值将用于纵坐标。属性值水平（X轴）垂直（Y轴）说明centertop居中靠上大图常常使用水平居中，顶部对齐right靠右居中只写一个值，另一个默认水平/垂直居中对齐12px50px12px50px距离左边12像素，距离上边50像素12pxcenter12px居中距离左边12像素，垂直居中50px12px12px背景位置(position)的属性值参数通过设置背景图片位置--让图片中间核心位置得以展示PART5背景固定或附着说明：背景固定效果参考：/背景图像固定（附着）语法：background-attachment:scroll|fixed参数参数值scroll背景图像随对象内容滚动（默认的）fixed背景图像固定PART6背景连写简写属性书写顺序官方并没有强制标准的，为了可读性，建议如下写：背景连写(background)background：背景颜色背景图片地址背景平铺背景滚动背景位置background：transparenturl()repeatscroll0%0%如：background:

#FFF

url(image.jpg)no-repeatscroll

center

top;PART7背景尺寸背景尺寸(background-size)语法：background-size：cover|contain参数参数值cover把背景图像扩展到足够大，使背景图片完全覆盖背景区域contain把背景图像扩展至最大尺寸，保证背景图片在背景区域内全部可见百分比以父元素的百分比来设置背景图的宽度和高度第1参数表示宽度，第2个参数表示高度只写一个参数，另一个默认为auto像素值设置背景图高度和宽度background-size:coverbackground-size:contain图片原始大小把背景图像扩展到足够大，使背景图片完全覆盖背景区域，但图像某些部分可能无法显示把图像扩展至最大尺寸，保证背景图片在背景区域内全部可见，但背景区域可能不会被填满。背景尺寸(background-size)background-size:100%100%；background-size:300px；图片原始大小以父元素的百分比来设置背景图的宽度和高度以像素值设置背景图高度和宽度。只写一个值，高度默认自动等比缩放背景尺寸(background-size)任务实践任务1个人页面首页（1）在VSCode中，创建站点文件夹，准备好素材资源文件夹，新建702.html。（2）设置body背景色为#ccc，创建<nav>标签，设置其内容水平居中对齐，.nav包含6个宽高为150*91的a链接。（3）a里面的文字要求水平、视觉上垂直居中，白色，22px，去掉下划线。（4）nav背景图像为head_bg1.jpg，并设置水平平铺。（5）当鼠标经过导航时，a的字体颜色变为蓝色，背景为xuanfu.png，设置居中、不平铺。（6）<nav>下添加兄弟标签为<section>，设置高度为780px，背景添加banner1.jpg，尺寸cover（拉伸满整个容器），顶部居中显示。任务实践任务1个人页面首页PART8背景尺寸问题1：一个盒子中可以加多个背景图片吗？问题2：多个背景之间的叠放顺序怎样区分？多个图片背景设置时，属性值之间用逗号“，”隔开，越往前的层级越高（越在上层）多重背景caoditaiyangtiankongPART9背景渐变线性渐变语法格式：background-image:linear-gradient(direction,color1,color2[stop],color3...);background-image：linear-gradient（线性渐变的方向，颜色1，颜色2，颜色3...）；线性渐变方向（1）方位名词top：设置渐变从上到下，为默认值。bottom：设置渐变从下到上。left：设置渐变从左到右。right：设置渐变从右到左。background-image:linear-gradient(blue,pink);线性渐变方向（1）角度角度用数字+单位来进行表示，单位使用deg所有的颜色都是从中心出发，0deg是totop的方向顺时针是正，逆时针是负多颜色渐变方向#62C2920%##F8CBAD50%#62C292100%径向渐变语法格式：background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);background-image:radial-gradient（圆的类型、径向渐变的尺寸、渐变位置，径向渐变的起止颜色）；径向渐变background-image:radial-gradient(red,yellow,green);

background-image:radial-gradient(circle,red,yellow,green);径向渐变案例#grad1{width:300px;height:100px;background-image:radial-gradient(circle,transparent10px,red12px);background-position:-150px;background-size:300px30px;}任务实践任务2制作网页中的优惠券要求：运用元素转换、盒子模型和背景属性、背景渐变制作优惠券，拓展对背景渐变属性的熟练掌握，PART10精灵图精灵图又名雪碧图即CSSSprites，是一种CSS图像合并技术精灵图是将小图标和背景图像合并到一张大图片上，然后利用CSS的背景定位来显示需要显示的图片部分作用：减少了服务器接受和发送请求的次数，提高了页面的加载速度精灵图精灵图的应用精灵图工具的使用X轴Y轴050100150200操作过程：用Fireworks打开图片第一步：锁定图层第二步：选择web切片工具，选择要切的图片第三步：记录下当前坐标精灵图的使用（1）创建一个容器（如<div>标签、<span>标签等）来加载精灵图。（2）设置background-position的值（默认为（0，0），也就是图片的左上角），即移动图片到自己想要的图标位置。代码为：background-position：-Xpx-Ypx;问题1：为什么使用雪碧图时background-position属性值为负数？背景图片在盒子中移动时，先将图片向左移X个单位，然后向上移Y个单位而网页的坐标向右为