html css 精灵图的使用

最新推荐文章于 2025-09-13 21:37:11 发布

原创最新推荐文章于 2025-09-13 21:37:11 发布 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

前端基础专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了CSS精灵图的原理及应用，精灵图是将多个背景图像整合到一张大图中，通过改变背景图片的位置来显示所需小图片，从而减少HTTP请求，提高网页加载速度。

精灵图的使用

什么是精灵图？
css精灵图是一种网页背景图片的处理方式它将多个零星的背景图像都集中到一张大图中去，然后用这张大图应用于网页，这样当用户访问网页时就只需向服务器请求一次，然后通过改变背景图片的位置来显示你所需要的那个小图片
示例：
在这里插入图片描述

html代码：
<div class="name1"></div>
        <div class="name2"></div>
        <div class="name3"></div>
        <div class="name4"></div>
<!--        <input type="button" style="width: 100px ; float: left ; background-color: white ; border: 0" >-->
        <div class="name5"></div>
        <div class="name6"></div>

div{
            width: 110px;
            height: 110px;
            float: left;
            background: url("abcd.jpg") no-repeat;
        }
        div.name1{
            background-position: -360px -425px;
        }
        div.name2{
            background-position: -0px -0px;
        }
        div.name3{
            background-position: -260px -280px;
        }
        div.name4{
            background-position: -100px -145px;
        }
        div.name5{
            background-position: 0 0;
        }
        div.name6{
            background-position: -380px -280px;
        }