一.背景
1.background-color 背景颜色
2.background-image 背景图片 值: url("图片路径")
background-image: url(img/png.png);
3.background-repeat 背景平铺方式
repeat 默认 水平垂直都平铺
no-repeat 不平铺
repeat-x 水平平铺
repeat-y 垂直平铺
4.background-position 背景图片位置
x轴坐标 y坐标;
x,y取值:可以数值+单位 或 百分比 或 英文单词
5.background-size 背景图片大小
width值 height值;
width,height取值: 可以是数值+单位,或百分比,或英文单词cover、
contain 把背景图片等比例扩展至最大尺寸,以使背景图片的宽度或高度 适应背景区域可能背景区域有留白
cover 把背景图片等比例扩大至足够大,以使背景图片铺满整个背景区域,可能使图片裁剪
6.background-attachment 背景图片是否固定
scroll 默认 背景图片随网页滚动
fixed 背景图片固定不动
缩写:background : bg-color值 bg-image值 bg-repeat值 bg-position值 / bg-size值
bg-attachment值 ;
二.CSS精灵
1.简介
全称:CSS Sprites,是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中,访问页面时避免图片载入缓慢的现象。
2.优点
利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点。