CSS高级技巧①——精灵图的使用

小波

1年前更新

320

文章目录[隐藏]

精灵图的核心：
例子：
使用精灵图取出下载游戏这个按钮

精灵图的核心：

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中2.这个大图片也称为sprites 精灵图或者雪碧图。
移动背景图片位置，此时可以使用 background-position。
移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同5.因为一般情况下都是往上往左移动，所以数值是负值。
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

优点：使用精灵图可以有效减少网络请求次数，提高页面加载速度，因为只需要加载一张大图片而不是多个小图片。

简单理解：就是把不常更改的多个图标融合到一个图里面，通过调整背景图片的显示位置，可以在一个固定大小的容器内显示出需要的部分图像，而其他部分则被隐藏起来。

例子：

比如王者荣耀官网里面的右上角登录旁边这个也能用精灵图来实现。

如图是从王者荣耀官网里面扒出的一个素材图(https://game.gtimg.cn/images/yxzj/web201706/images/comm/index.png)。

使用精灵图取出下载游戏这个按钮

通过PS打开图片获取他的位置为y=210，然后按钮大小为235x130

接着调位置加一个button，然后把盒子大小设置好加上背景图片，最后设置y=-210，因为我们需要这个图片往上走所以是负。

.buttton {
            width: 235px;
            height: 130px;
            background-image: url("https://game.gtimg.cn/images/yxzj/web201706/images/comm/index.png");
            background-position-y: -220px;
        }

最终效果，上面是普通图片，下面是精灵图。

完整源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .buttton {
            width: 235px;
            height: 130px;
            background-image: url("https://game.gtimg.cn/images/yxzj/web201706/images/comm/index.png");
            background-position-y: -220px;
        }
    </style>
</head>
<body>
    <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/index.png"><hr>
    <div class="buttton"></div>
</body>
</html>

评分

欢迎为Ta评分

赞赏