大前端入门指南（〖大前端 – 基础入门三大核心之CSS篇⑲〗- CSS精灵的使用 与 background综合属性）
文章目录
⭐️ css精灵 ⭐️ background综合属性 🌟 背景渐变 ✨ 线性渐变 ✨ 径向渐变书接上一篇 ，我们继续学习背景中css精灵的使用 、background综合属性和背景渐变 。
⭐️ css精灵
css精灵：将多个小图标合并制作到一张图片上 ，使用background-position属性单独显示其中一个 ，这样的技术叫做css精灵 ，也叫做css雪碧图（雪碧的英文就是sprite ，原译精灵 。） 。实际工作中 ，css雪碧图一般都是由UI工程师提供的 。
比如下面就是一个css精灵图：
下面我们就用这张css精灵图 ，并结合背景图片位置的属性拼写一个“ok ”:
第一步：使用ps或其他图片编辑工具 ，定位想要的图标：
注意：如果写成backgroud-position的值 ，需要加上负号：backgroud-position: -618px -176px 。
第二步：将css精灵图片作为背景图片插入到盒子中 ，然后将backgroud-position定位到“o ”和“k ”
我们也可以在图片编辑工具中看到这个图标的宽度*高度 。盒子的宽度和高度就是图标的宽度和高度 。
使用css精灵图的优势：css精灵可以减少HTTP请求数 ，加快网页显示速度 。缺点也很明显：不方便测量 、后期改动麻烦 。
⭐️ background综合属性
background属性是综合属性 ，可以同时设置背景颜色和背景图片 ，盒子种没被背景图片覆盖的部分会显示背景颜色 。如果背景图片有透明部分 ，也会被背景颜色填充 。
一些常用的背景相关小属性 ，可以和写到一条background属性中 。实际工作中 ，综合属性经常使用 ，一定要记住综合属性的写法 。
🌟 背景渐变
背景渐变的知识点 ，共分为 线性渐变 、浏览器私有前缀 和 径向渐变 ，接下来就让我们一一了解吧 。
✨ 线性渐变
线性渐变属于背景图片backgroud-image属性管理的,而不是背景颜色
线性渐变：backgroud-image: linear-gradient()
下面看个例子：
渐变方向也可以写成度数：
deg表示度数（表示倾斜的方向） ，不用刻意记什么度数表示什么方向 ，实际工作中可以不停的尝试 。
渐变颜色也可以有多个颜色值 ，并且可以用百分数定义它们出现的位置 ，下面直接看例子：
线性渐变还是挺简单好用的 。而且出现的频率也不算很低 。比如一些按钮就用到渐变 。
### ✨ 浏览器私有前缀
不同浏览器有不同的私有前缀 ，为了兼容老版本的浏览器 ，推荐将试验性的css属性添加浏览器私有前缀 。
浏览器 前缀 chrome -webkit- firefox -moz- ie 、efge -ms- 欧朋 -o-这些一定要记住 ，面试的时候可能会考 。
加上浏览器前缀的好处就是 ，对于一些版本比较低的浏览器也能够识别到这个属性 。比如上面提到的背景渐变提倡这样写：
大家会觉得添加这些好麻烦啊 ，不要慌！nodejs是有智能化的工具的 ，这些工具可以把需要添加私有化前缀的css属性自动的添加上私有化前缀 ，不需要我们手动的添加 。
✨ 径向渐变
径向渐变：backgroud-image: radial-gradient()
径向渐变的参数还是挺多的 ，但径向渐变用到的概率不大 ，我们学一个简单的例子就好：
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！