css精灵图怎么引用 |css浮动按钮

CSS精灵图是一种将多个小图片放到一张大图片中，再利用css background-position来显示所需部分的技术。使用CSS精灵图可以减少网页的http请求次数，使页面加载更快。那么CSS精灵图应该如何引用呢？下面大家来看一下具体步骤。 首先，准备一张包含多个小图片的精灵图。图片格式可选择PNG、JPEG等格式。图片大小一般控制在不超过200KB，避免过大的图片影响加载速度。 然后，在html中添加对应的元素，例如：

<div class="btn-home"></div>

这里大家添加了一个class名为“btn-home”的div元素。 接着，在CSS文件中设置精灵图的背景图片和background-position，例如：

.btn-home {
width: 30px;
height: 30px;
background: url(images/sprites.png) no-repeat 0 0; /* 设置精灵图背景图片 */
background-position: -15px -282px; /* 设置显示区域 */
}

这里给.btn-home设置了宽度和高度，并指定精灵图的背景图片为“images/sprites.png”，坐标为（0，0）的位置。接着，利用background-position将btn-home的显示区域设置为精灵图坐标为（-15，-282）位置的小图片。 最后，通过html中添加的元素class名来调用CSS样式：

<div class="btn-home"></div>

这样，大家就成功引用了一个CSS精灵图。 总结来说，使用CSS精灵图可以减少页面的http请求，达到提高页面加载速度的目的。引用CSS精灵图的步骤为：1.准备图片；2.在html中添加元素；3.在CSS文件中设置背景图片和background-position；4.通过class名调用CSS样式，即可成功引用CSS精灵图。