1、背景颜色
2、渐变色背景
3、多背景叠加
4、背景图片和属性（雪碧图）
5、base64和性能优化
6、多分辨率适配
1、背景颜色
1）直接用颜色名或颜色值
background: red;
2）hsl(色相，饱和度，亮度)
色相是0到360的角度。饱和度是0到100%。亮度100%是白色，0是黑色，50%一般是纯色
hsl(0,100%,50%)
3) hsla(色相，饱和度，亮度, 透明度)
4) rgb(255, 0, 0);
5) rgba(255, 0, 0, 0.3)
2)、渐变色背景
<style> .c2 { height: 90px; background: linear-gradient(to right,red,green) /* background: -webkit-linear-gradient(left,red,green) */ } </style> <body> <div class="c2"></div> </body>
从左到右，从白色逐渐到绿色。上面是新的写法，下面是老的写法。一般情况下我们是用角度
background: linear-gradient(0deg,red,green)
0deg是从下到上，90deg是从左往右，180从上到下，270deg是从右往左。除了从角度上写，还可以增加颜色
background: linear-gradient(135deg,red 0,green 50%, blue 100%)
颜色后面的从哪开始，还可以添加更多的颜色
background: linear-gradient(135deg,red 0,green 10%, yellow 50%, blue 100%)
那么同样我们也可以去设置透明度，这样有些有背景，有些没有背景，如果这个背景足够窄的话，就可以画很多有趣的图形。
background: linear-gradient(135deg,transparent 0,transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%);
这里是135的角度。0到49%都是透明的，到49.5%的地方既是透明的又是绿色。到50.5%的时候也是既是透明的，又是绿色，后面又是透明的，相当于在49.5到50.5的地方画了一根绿线，前后都是透明。
那么这个有什么用呢？
我们再加一个尺寸，background-size: 30px 30px;
<style> .c2 { height: 90px; background: linear-gradient(135deg,transparent 0,transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%); background-size: 30px 30px; } </style> <body> <div class="c2"></div> </body>
3、多背景叠加
这个时候我们再写一条
<style> .c2 { height: 90px; background: linear-gradient(90deg,transparent 0,transparent 49.5%, green 49.5%, green 50.5%, transparent 50.5%, transparent 100%), linear-gradient(45deg,transparent 0,transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%); background-size: 30px 30px; } </style> <body> <div class="c2"></div> </body>
两个linear-gradient是一样的，只不过角度和颜色变了一下。就实现了这样的网格线。
4、雪碧图
<style> .c1{ height: 90px; background: red url(./text.png) } </style> <body> <div class="c1"></div> </body>
我们发现红色背景没出现，是因为背景图是不透明的平铺的。将高度设大一点，会发现横向纵向都是平铺的。有时候平铺并不是我们想要的结果。
可以设置background-repeat:no-repeat。或者水平方向平铺background-repeat:repeat-x。或者垂直方向平铺background-repeat:repeat-y。
如果我想背景图的位置在中间，可以设置background-position:center center。水平方向中间，垂直方向中间。也可以指定像素，background-position: 20px 30px。水平方向20px,垂直方向30px。
背景图的大小也是可以控制的，设置background-size:100px 50px。宽100px,高40px
雪碧图demo
<style> .c2{ width: 40px; height: 40px; background: url(./text.png) no-repeat; background-position: -133px -32px } </style> <body> <div class="c2"></div> </body>
固定好高度，宽度，背景不平铺。将背景图片的位置进行移动，直到移动到出现自己到图标的位置。
多分辨率适配：一张图在电脑比较清晰，在手机比较模糊，可以将图片做的，再设置大小，缩小，用多个像素填充
base64和性能优化：一张图片可以转为base64展现，这样请求是减少了，但是文件体积增大了，而且浏览器需要解码。消耗了性能。