css精灵图动画，css图片精灵的作用是什么

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

06-CSS背景和精灵图

1、方法用ps或者dw把需要的图片切下来，自己通过ps，把需要的图片整合拼合成一张图片。

2、核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。使用精灵图核心：精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。

3、CSS Sprites是一种性能优化技术，是一种将多个图像组合成单个图像文件以在网站上使用的方法，以提高性能；也被称为css 精灵图。为什么要使用Sprites（精灵图）？网页通常包含多个图像。

Q1: CSSSprites是什么

CSS Sprites是一种性能优化技术，是一种将多个图像组合成单个图像文件以在网站上使用的方法，以提高性能；也被称为css 精灵图。为什么要使用Sprites（精灵图）？网页通常包含多个图像。

CSSSprites简介通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSSSprites并不是一门新技术，目前它已经在网页开发中发展得较为成熟，阿里巴巴各子公司的网页中到处都可发现csssprites的影子。

CSSSprites是一种将多个图像合并到一个图像中的技术。通过使用CSSSprites，可以减少HTTP请求，从而提高页面加载速度。以下是使用CSSSprites的步骤：将需要合并的图像放在一个文件夹中。

Q2: css常见技巧-雪碧图、背景、居中、透明度

CSS3 支持背景半透明的写法，颜色值增加了一种 rgba 模式。 rgba 模式：在 rgb 基础上增加了一个不透明度的设置，不透明度 alpha 取值范围在0-1 之间， 0 表示完全透明， 1 表示完全不透明， 0.5 表示半透明。

图片宽高固定，这种情况很简单。水平居中：就在图片的css中加dispaly：block；margin：0auto；垂直居中：自己算出（p的高度-图片的高度）/2，得到margin-top值即可。图片高度未知，这个布局比较难实现。一般我是用js做的。

background-position需要x轴和Y轴两个值，如果只写一个值，第二个值默认center。所以就没有继承一说了，你想hover重置第二个值，第一个值也是要再写一遍的，不能继承。

合并雪碧图(sprite)：移动端多图情况下，可以将多图合并到一个图中，通过CSS定位背景图的形式来引用图片，可以有效减少HTTP请求。

一个专业的前端开发工程师是必须掌握前端开发三大基本基石HTML、CSS，JavaScript。光会这些还不够，有了这些语言还需要各种工具的支撑，比较常见的有Dreamweaver，Sublime，HBuilder。

Q3: css动画用什么规则

1、keyframes是CSS的一种规则，可以用来定义CSS动画的一个周期的行为，创建简单的动画。css @keyframes作用：通过 @keyframes 规则，您能够创建动画。说明：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

2、使用CSS3动画属性：CSS3提供了一些动画属性，如transition、animation和transform，可以用来制作简单的引导层动画。例如，可以使用@keyframes规则定义一个动画序列，然后将其应用到元素上。

3、可以使用CSS中的animation属性和@keyframes规则来实现图片自上而下落下来的动画效果。

4、当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等； animation 的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。

Q4: 怎样制作CSS精灵图

接下来我们就可以在页面中使用这些图标了。如下图所示是我做出来的代码和在浏览器中的效果图标的位置是怎么快速准确的找到的？这里的位置以左上角开始，x轴，y轴的值均为负值。

方法用ps或者dw把需要的图片切下来，自己通过ps，把需要的图片整合拼合成一张图片。

CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。实现方法：首先将小图片整合到一张大的图片上然后根据具体图标在大图上的位置，给背景定位。

CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。

当需要特定图像（精灵图）时，一般会通过CSS background-images属性引用精灵表，在通过CSS background-position属性对其进行偏移定位得到所需的精灵图，然后以像素为单位定义精灵图的大小。

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。这个大图片也称为 sprites 精灵图或者雪碧图移动背景图片位置，此时可以使用 background-position 。

css精灵图动画的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css图片精灵的作用是什么、css精灵图动画的信息别忘了在本站进行查找喔。