1.背景
<!--
1.设置背景颜色 background-color
取值:英文、rgba、rgb、#000000、hsl(a)
2.背景图片
使用场景:
① 常见的logo
② 装饰性的小图标
③ 超大图片
使用背景图的优点:可以更好的设置位置
2.1 background-image 设置背景图片
2.2 当背景图片大小<元素大小=》默认重复图片,将元素铺满
background-repeat:设置是否平铺
取值:no-repeat 设置不平铺
repeat 设置平铺(默认)
包括:background-repeat-x(水平方向)和background-repeat-y(垂直方向)
2.3 设置背景图片在元素中的位置
background-position
取值:
一个值:代表图片离元素左边的距离,垂直方向默认居中
二个值:第一个值代表图片离元素左边的距离,第二个值代表图片离元素顶部的距离
取值的类型:具体数值,方位词:left、right、top、bottom、center
百分比:元素本身的宽高
2.4 设置背景图片的大小
background-size:
取值:具体数值 百分比(元素本身的宽高)
cover:初始比例进行缩放,是最小一边铺满元素,有可能会出现图片显示不完全
contain:初始比例进行缩放,只要有一边完成铺满就可以,有可能会出现部分元素区域没有铺满
2.5 设置背景图片是否固定
background-attachment
取值:fixed 固定
scroll 随着滚动条进行滚动
-->
2.精灵图(雪碧图)
<!--
精灵图又称雪碧图,是将小图标集中于一张图片上
优点:
①将多个图片整合为一张图片,浏览器只需要发送一次请求,就可以同时加载多个图片,提高访问效率,提高用户体验
②将多个图片整合为一张图片,减少图片的总大小,提高请求的速度,增加了用户体验
-->
3.简写用backgroud一个代替所有
<!-- 背景简写属性:background -->
/* 当设置背景时有方向和大小时,书写:方向/大小*/