【Web前端实操16】雪碧图（CSS精灵图）

最新推荐文章于 2024-05-19 09:47:12 发布

墨倾许

最新推荐文章于 2024-05-19 09:47:12 发布

阅读量762

点赞数 7

分类专栏： Web前端实操文章标签：前端

本文链接：https://blog.csdn.net/qq_45498824/article/details/135855655

版权

Web前端实操专栏收录该内容

22 篇文章 0 订阅

订阅专栏

雪碧图

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

雪碧图一般会给一个完整的图片，主要利用background-position 属性设置背景图像的起始位置。

优点

减少图片的字节
减少网页的http请求，从而大大的提高页面的性能

原理

通过background-image引入背景图片
通过background-position把背景图片移动到自己需要的位置

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪碧图</title>
    <style>
        span{
            display: block;
            width: 55px; 
            height: 55px; 
            border: 1px solid #ccc;
            background-image: url("img/xuebi.png") ;
            float: left;
        }
        /* background-position 属性设置背景图像的起始位置。
        提示: 默认情况下，background-image 背景图像放置在元素的左上角，并在垂直和水平方向上重复。 */
        .one{
            background-position: -14px -20px;
        }
        .two{
            background-position: 70px -20px;
        }
        .three{
            background-position: 143px -20px;
        }
        .four{
            background-position: 216px -20px;
        }
        .five{
            background-position: 288px -20px;
        }
        .six{
            background-position: 360px -20px;
        }
        
    </style>
</head>
<body>
    <div>
        <span class="one"></span>
        <span class="two"></span>
        <span class="three"></span>
        <span class="four"></span>
        <span class="five"></span>
        <span class="six"></span>
    </div>
</body>
</html>

实现效果：

实现效果没有做很长，依次类推，可以慢慢根据距离做出雪碧图，如有不解，可以在评论区评论，共同进步

墨倾许

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【Web前端实操16】雪碧图（CSS精灵图）

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。实现效果没有做很长，依次类推，可以慢慢根据距离做出雪碧图，如有不解，可以在评论区评论，共同进步。雪碧图一般会给一个完整的图片，主要利用。属性设置背景图像的起始位置。
复制链接

扫一扫

专栏目录