CSS精灵图(Sprite)笔记

最新推荐文章于 2024-04-26 22:14:41 发布

IT小庄同学

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量784

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/Z_CH8648/article/details/128064552

版权

什么是CSS 精灵图？

图像精灵是单个图像中包含的图像集合。

包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

使用图像精灵将减少服务器请求的数量并节约带宽。

网站上有很多小图标，这些小图标如果使用单独的图片，会对服务器产生大量的连接请求，造成堵

塞；精灵图是把许多小图标整合成一张图片，减少连接请求，增加页面显示速度。

精灵图 - 简单的例子

我们使用以下单幅图像（"iconall.png"）而不是使用单独的图标：

通过使用 CSS，我们可以仅显示所需图像的某个部分。

在下面的例子中，CSS 指定了显示 "iconall.png" 图像的哪部分：

.playBtn{
            width: 28px;
            height: 28px;
            background-image: url(img/iconall.png);
            background-position: 0px -140px;
        }

注意：

精灵图主要针对小的背景图片使用。
精灵图的显示主要借助于背景位置来实现background-position
一般情况下精灵图都是负值。
网页中的坐标：x轴右边是正值，左边是负值，y轴也是和x轴一样的原理。

精灵图悬停效果

提示：:hover 选择器可用于所有元素，而不仅限于链接。

我们的新图像（"iconall.png"）包含鼠标悬停效果的图标：

通过代码实现：

.playBtn{
            width: 28px;
            height: 28px;
            background-image: url(img/iconall.png);
            background-position: 0px -140px;
        }
        .playBtn:hover{
            background-position: 0px -170px;    //通过鼠标经过出现图标
        }

下面我们通过实例来了解精灵图吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .playBtn{
            width: 28px;
            height: 28px;
            background-image: url(img/iconall.png);
            background-position: 0px -140px;
        }
        .playBtn:hover{
            background-position: 0px -170px;
        }

        .dot{
            width: 6px;
            height: 6px;
            background-color: #CCC;
            border-radius: 50%;
        }
        .dot:hover{
            background-color: #F00;
        }
        /*  */
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }

        .list li{
            width: 230px;
            height: 30px;
            line-height: 30px;
        }
        .list li:nth-child(2n+1){
            background-color: #CCC;
        }
        .list li:nth-child(2n){
            background-color: #EEE;
        }
        .number{
            float: left;
            font-size: 20px;
            width: 30px;
            text-align: center;
            color: #F00;
        }
        .name{
            float: left;
            font-size: 13px;
        }
        .name:hover{
            text-decoration: underline;
            cursor:pointer;
        }
        .icon{
            float: right;
        }
        .playIcon{
            float: left;
            width: 20px;
            height: 20px;
            background-image: url(img/index.png);
            background-position: -265px -266px;
            margin: 5px;
            display: none;
        }

        .list li:hover  .playIcon{
            display: block;
        }

        .playIcon:hover{
            background-position: -265px -286px;
        }

        .username{
            width: 250px;
            height: 36px;
            outline: none;
            border: 1px solid #CCC;
            line-height:36px;
            padding-left: 50px;
            background: url(img/user_login_white.png) no-repeat ;
        }
        .username:hover{
            border: 1px solid #CCC;
        }

        .username:focus{
            background: url(img/user_login_grey.png) no-repeat ;
        }
    </style>
</head>
<body>
    <!-- 
        Sprite  
        精灵图/ 雪碧图

        网站上有很多小图标，这些小图标如果使用单独的图片，会对服务器产生大量的连接请求，造成堵塞

        精灵图是把许多小图标整合成一张图片，减少连接请求，增加页面显示速度

        精灵图的使用
     -->
     <div>
        <div class="playBtn"></div>

        <div class="dot"></div>
     </div>

     <!--  -->
     <div>
        <div>
            <div>原创榜</div>
        </div>
        <ul class="list">
            <li>
                <div class="number">1</div>
                <div class="name">Lady Mama</div>
                <div class="icon">
                    <div class="playIcon" title="播放"></div>
                </div>
            </li>
            <li>
                <div class="number">2</div>
                <div class="name">Lady Gaga</div>
                <div class="icon">
                    <div class="playIcon"></div>
                </div>
            </li>
            <li>
                <div class="number">3</div>
                <div class="name">Lady Mama</div>
                <div class="icon">
                    <div class="playIcon"></div>
                </div>
            </li>
            <li>
                <div class="number">4</div>
                <div class="name">Lady Gaga</div>
                <div class="icon">
                    <div class="playIcon"></div>
                </div>
            </li>
        </ul>
     </div>
     <div>
        <input type="text" class="username">
     </div>


</body>
</html>

实例中的图片可以自行通过网易云去下载获取精灵图，也可以找我要；