css 如何使用精灵图？background属性介绍（代码案例）
时间：2024/3/3作者：未知来源：争怎路由网人气：
- 网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。本章给大家介绍css 怎样使用精灵图？background属性介绍（代码实例），让大家可以了解css精灵图（雪碧图）是怎样使用的。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
一、css 如何使用精灵图?
介绍如何使用精灵图使用前，我们要先知道什么是精灵图。只有先知道什么是精灵图，了解精灵图的原理了，我们才可是说使用精灵图。
1. 什么是css精灵图（sprite）？
css精灵图（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
2.使用css精灵图（sprite）的方法
css精灵图（sprite）其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。在需要用到图片的时候，现阶段是通过CSS属性background-image组合background-repeat, background-position等来实现图片的显示。
3.代码实现：
使用到的精灵图（sprite）素材：incn.png
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文子居中</title> <style> * { margin: 0; padding: 0; } .sprites{ width: 200px; margin: 50px auto; } .sprites div { margin: 5px; } .sprites span { float: left; width: 20px; height: 20px; background-image: url(icno.png);//引用精灵图（sprite）：incn.png background-size: 60px 40px; } .sprites1 { background-position: 0 0; } .sprites2 { background-position: -20px 0; } .sprites3 { background-position: 0 -20px; } .sprites4 { background-position: -20px -20px; } .sprites5 { background-position: -40px 0; } .sprites6 { background-position: -40px -20px; } </style> </head> <body> <div class="sprites"> <div><span class="sprites1"></span>付款图标</div> <div><span class="sprites2"></span>存款图标</div> <div><span class="sprites3"></span>删除图标</div> <div><span class="sprites4"></span>粘贴图标</div> <div><span class="sprites5"></span>笑脸图标</div> <div><span class="sprites6"></span>编辑图标</div> </div> </body> </html>效果图：
使用到的核心代码：
background-image: url(icno.png);---为sprites里的span元素设置背景图像，引用了精灵图（incn.png）；
background-size: 60px 40px; ---为背景图像调整尺寸大小，使得sprites盒子的span元素的背景图像固定为宽（60px）,高（40px）；
background-position 属性---这是最关键的代码，图片定位。设置或检索sprites盒子的span元素的背景图像位置。必须先指定 background-image 属性才可使用。
说明：背景background-position有两个数值，前一个代表靠左距离值（可为正可为负），第二个数值代表靠上距离值（可为正可为负）。当为正数时，代表背景图片作为对象盒子背景图片时靠左和靠上多少距离多少开始显示背景图片；当为负数时代表背景图片作为盒子对象背景图片，将背景图片拖动超出盒子对象左边多远，拖动超出盒子对象上边多远开始显示此背景图片。
二、关于css background属性其他属性值介绍
background属性除了上述的background-image，background-size，background-position 属性值以外，还有其他的属性值，比如：
1.background-color：定义了元素的背景颜色.一般定义的都是纯色的背景。
body {background-color:#b0c4de;}效果图：
body {background-color:#b0c4de;}设置整个页面的背景颜色为：#b0c4de
在CSS中，颜色值通常可以用以下方式定义:
十六进制 - 如："#ff0000"；
RGB - 如："rgb(255,0,0)"；
颜色名称 - 如："red"。
2. background-repeat：定义了背景图片的平铺方式（水平或垂直平铺，不平铺）。
语法：
background-repeat：repeat-x
关键词：css 如何运用精灵图？background属性介绍（代码案例）