CSS中精灵图的使用

最新推荐文章于 2024-05-16 17:48:19 发布

weixin_45987479

最新推荐文章于 2024-05-16 17:48:19 发布

阅读量1.5k

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_45987479/article/details/125487218

版权

1.精灵图的用途

为了有效地减少服务器接收和请求的次数，提高网页的加载速度，因此产生了CSS精灵技术（也称CSS Sprites、CSS雪碧）

原理：把网页中的一些背景图片整合到一张图片文件中, 用backgroun-position等属性进行背景定位

2. 精灵图（sprites）的使用

（1）精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中
（2）这个大图片也称sprites精灵图或者雪碧图
（3）移动背景图位置，此时可以background-position移动的距离就是这个目标图片的x和y坐标。
（4）使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

2. 精灵图的优缺点

（1）优点:

      1. 减少http请求, 加快网页的加载速度, 提高用户体验
      2.减少图片的体积, 减少字节数
      3. 解决设计师图片命名的烦恼
      4.更换风格方便

（2）缺点:

      1. 开发时需要测量, 比较繁琐
      2. 维护的时候麻烦
      3. 精灵图不能随意改变大小和位置
      4. 宽屏高分辨率的屏幕下, 容易出现背景断裂

3. 演示代码

<!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>
       div{
        width: 500px;
        height: 100px;
        display: flex;
        background-color: white;
        justify-content: space-around;
        margin: 0 auto;
       }
 span {
display: flex;
flex-direction: column;
margin-left: 8px;
 }
 a{
    margin-top: 8px;
    width: 64px;
    height: 64px;
 }
 span:nth-child(1) a{

    background-image: url(./images/localnav_bg.png);
 }
 span:nth-child(2) a{
    background-image: url(./images/localnav_bg.png);
 background-position:  0 64px;
 }
 span:nth-child(3) a{
    background-image: url(./images/localnav_bg.png);
    background-position:  0 128px;
 }
 span:nth-child(4) a{
    background-image: url(./images/localnav_bg.png);
    background-position:  0 192px;
 }
 span:nth-child(5) a {
       background-image: url(./images/localnav_bg.png);
    background-position:  0 256px;
 }
    </style>
</head>

<body>
    <div>
         <span>
            <a href="#"></a>
            <span style="margin-left: 1px;">景点.玩乐</span>
         </span>
         <span>
            <a href="#"></a>
            <span>周边游</span>
         </span>
         <span>
            <a href="#"></a>
            <span>美食林</span>
         </span>
         <span>
            <a href="#"></a>
            <span>一日游</span>
         </span>
         <span>
            <a href="#"></a>
            <span style="margin-left: 1px;">当地攻略</span>
         </span>
    </div>
</body>

</html>