css进阶：精灵图的使用、实现用精灵图拼出名字

曹莓奶昔

已于 2022-03-24 11:00:06 修改

阅读量2.6k

点赞数 5

分类专栏： CSS 文章标签：前端 css css3 vscode

于 2022-03-23 23:27:48 首次发布

本文链接：https://blog.csdn.net/weixin_49555741/article/details/123697330

版权

CSS 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

1.精灵图的用途

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

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只要一次请求就可以了

2. 精灵图（sprites）的使用

2.1 原理

使用精灵图核心：

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

2.2 总结

精灵图主要是针对于小的背景图片的使用
主要借助背景位置来实现---background-position
精灵图的数值大多数是负值（左负，右正，上负，下正）

精灵图的缺点：

图片文件比较大
图片本身放大和缩小会失真
一旦图片制作完就很难更换

3. 案例：用精灵图拼出名字

3.1 效果图

3.2 代码

<!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>用精灵图拼出名字</title>
    <style>
        span {
            display: inline-block;
            margin: 100px auto;
            margin-right: 20px;
        }

        .l {
            width: 105px;
            height: 120px;
            background: url(images/abcd.jpg) no-repeat 0px -270px;
        }

        .i {
            width: 62px;
            height: 117px;
            /* margin: 100px 120px; */
            background: url(images/abcd.jpg) no-repeat -325px -135px;
        }

        .s {
            width: 122px;
            height: 118px;
            /* margin: 100px 140px; */
            background: url(images/abcd.jpg) no-repeat -247px -415px;
        }

        .a {
            width: 112px;
            height: 118px;
            /* margin: 100px 160px; */
            background: url(images/abcd.jpg) no-repeat 0px 0px;
        }
    </style>
</head>

<body>
    <span class="l"></span>
    <span class="i"></span>
    <span class="s"></span>
    <span class="a"></span>
</body>

</html>

26字母图如下

曹莓奶昔

关注

5
点赞
踩
23

收藏

觉得还不错? 一键收藏
2
评论
css进阶：精灵图的使用、实现用精灵图拼出名字

1.精灵图的用途为了有效地减少服务器接收和请求的次数，提高网页的加载速度，因此产生了CSS精灵技术（也称CSS Sprites、CSS雪碧）核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只要一次请求就可以了2. 精灵图（sprites）的使用2.1 原理使用精灵图核心：精灵技术主要针对背景图片使用。就是把多个小背景图片整合到一张大图片中这个大图片也称sprites精灵图或者雪碧图移动背景图位置，此时可以background-position 移动的
复制链接

扫一扫