css 如何使用精灵图？background属性介绍（代码实例）

柔光的暖阳◎ 2023-02-21 12:54 10阅读 0赞

本章给大家介绍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等来实现图片的显示。

### **[打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）][web]** ###

**3.代码实现：**

使用到的精灵图（sprite）素材：incn.png

![format_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>

效果图：

![format_png 1][]

使用到的核心代码：

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;}

效果图：

![format_png 2][]

body \{background-color:\#b0c4de;\}设置整个页面的背景颜色为：\#b0c4de

在CSS中，颜色值通常可以用以下方式定义:

十六进制 - 如："\#ff0000"；

RGB - 如："rgb(255,0,0)"；

颜色名称 - 如："red"。

2. background-repeat：定义了背景图片的平铺方式（水平或垂直平铺，不平铺）。

语法：

background-repeat：repeat-x || repeat-y || no-repeat ;

repeat-x ：水平平铺；

repeat-y：垂直平铺；

no-repeat：不平铺。

3. background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。

语法：

background-repeat：scroll || fixed || inherit；

scroll：默认属性，设置背景图片随页面的其余部分滚动；

fixed ：设置背景图像是固定的；

inherit：指定background-attachment的设置应该从父元素继承；

以上就是css 如何使用精灵图？background属性介绍（代码实例）的详细内容，更多请关注我！

[web]: https://zhuanlan.zhihu.com/p/138726269
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMzLnpoaW1nLmNvbS84MC92Mi0zNjhjMTc0MThhNDEzYTYxYmI1MTkwMWE1ZTM5MzAxNl83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi03MDg4YzM5ODAwNTFhN2VhODBiMWJmNjRmNDgzMmYzMV83MjB3LmpwZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1kMDE4YmQ1ODQ3ZGJkNmNkZjhiZTgzMDRkODlhZjU4Zl83MjB3LmpwZw?x-oss-process=image/format,png