一：雪碧图
雪碧图是什么？
一个页面可能会用到多个图片或者图标，如果每个图片都是一个单独的文件，则需要浏览器进行多次加载，浪费性能和带宽。
而且在某也情况下图片会延迟加载，导致用户体验不好。
将多个图片和图标放到一个图片文件上面，不仅可以一次加载，而且图片的大小会更少。
使用方法？
使用background-position属性就可以使用雪碧图，达到按需使用图片。
实例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.A{width: 241px;height: 218px;background-image: url("../IMAGE/TEST.png");}.B{width: 241px;height: 218px;background-image: url("../IMAGE/TEST.png");background-position: -241px 0;}</style></head><body><div><div class="A"></div><div class="B"></div></div></body></html>
二：渐变
暂时用不到，先不写。
/*线性变换*/.C{width: 241px;height: 218px;background-image: linear-gradient(45grad,red 10px,blue 20px,yellow 30px);}/*径向变换*/.D{width: 241px;height: 218px;background-image: radial-gradient(at 10px 10px,red,blue);}
如果觉得《HTML+CSS 背景之雪碧图+渐变》对你有帮助，请点赞、收藏，并留下你的观点哦！
