css之雪碧图（精灵图）

已于 2024-09-02 15:03:28 修改
阅读量248 收藏 1
点赞数 8
分类专栏： css 文章标签： css 前端
于 2024-09-02 14:57:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_55961367/article/details/141819885
版权

听到雪碧图是不是跟我一样，啥？雪碧图？不知所以。

如果一张大图由许多小图构成，那么每张小图都需要进行网络请求，这样一来就会有很多请求，为了减少网络请求，雪碧图就出现了。

雪碧图（Sprite）是一种在Web开发中常用的图像合并技术，将多个小图标或图片合并成一张大图，然后通过CSS来显示其不同部分。这种技术可以减少HTTP请求数量，提高网页加载速度。

以下是本人自己写的例子，大图的图片是在百度找的https://img2.baidu.com/it/u=2480900908,627122939&fm=253&fmt=auto&app=138&f=JPEG?w=602&h=231

原图长这样

代码运行长这样：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display: flex;
        }
        .icon1{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -5px 1px;
            /* border: 1px solid #000; */
        }

        .icon2{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -95px 1px;
        }
        .icon3{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -185px 1px;
        }
        .icon4{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -275px 1px;
        }
        .icon5{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -365px 1px;
        }
        .icon6{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -455px 1px;
        }
        .icon7{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -545px 1px;
        }
        .icon2-1{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -5px -90px;
        }
        .icon2-2{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -95px -90px;
        }
        .icon2-3{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -185px -90px;
        }
        .icon2-4{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -275px -90px;
        }
        .icon2-5{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -365px -90px;
        }
        .icon2-6{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -455px -90px;
        }
        .icon2-7{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -545px -90px;
        }
        .icon3-1{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -5px -179px;
        }
        .icon3-2{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -95px -179px;
        }
        .icon3-3{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -185px -179px;
        }
        .icon3-4{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -275px -179px;
        }
        .icon3-5{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -365px -179px;
        }
        .icon3-6{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -455px -179px;
        }
        .icon3-7{
            display: block;
            background-image: url("@/../xuebitu.jpg");
            width:50px;
            height:55px;
            background-position: -545px -179px;
        }
    </style>
</head>
<body> 
    <div>
        <span class="icon1"></span>
        <span class="icon2"></span>
        <span class="icon3"></span>
        <span class="icon4"></span>
        <span class="icon5"></span>
        <span class="icon6"></span>
        <span class="icon7"></span>
    </div>
    <div>
        <span class="icon2-1"></span>
        <span class="icon2-2"></span>
        <span class="icon2-3"></span>
        <span class="icon2-4"></span>
        <span class="icon2-5"></span>
        <span class="icon2-6"></span>
        <span class="icon2-7"></span>
    </div>
    <div>
        <span class="icon3-1"></span>
        <span class="icon3-2"></span>
        <span class="icon3-3"></span>
        <span class="icon3-4"></span>
        <span class="icon3-5"></span>
        <span class="icon3-6"></span>
        <span class="icon3-7"></span>
    </div>
    <!-- <span class="icon2"></span> -->
</body>
</html>

星月心城
关注
  • 8
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS之sprite/精灵图/雪碧图
Sallywa的博客
01-14 926
刚开始学CSS Sprite的时候在网上看博客，总感觉写的不清楚，看了很多很久才明白CSS Sprite是个啥玩意儿，对新手党十分不友好。所以打算根据现有的文章和自己的理解写一个通俗的关于雪碧图的博客，能让新手党也一看就懂～ 1.什么是CSS雪碧图 css雪碧图就是N张图片的拼接而成的一整张图片，注意是拼接成了一整张，而不是单纯的N张拼接在一起但仍然是零散N张。如下所示，假设我们的网页需要1，...
CssSprite雪碧图
12-14
**CssSprite雪碧图详解** 在网页设计中，图片的加载速度往往直接影响到用户体验。为了优化网页性能，提高页面加载速度，一种名为“CssSprite”（雪碧图）的技术应运而生。雪碧图是一种将多个小图标合并到一张大图中...
css 雪碧图（精灵图）动画
wangatong的博客
04-10 452
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title>
CSS Sprite雪碧图
CamilleZJ的博客
05-22 7722
什么是雪碧图？雪碧图也叫CSS精灵， 是一种CSS图像合成技术；通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。如下：如上雪碧图，background-position使用定位如下X和Y轴，注：原点0，0 位置， 之后X和Y轴均为负值，定位到图片左上侧起点后根据width和height截取小图标为什么应用雪碧图？网站开发90%会用...
css精灵图（雪碧图）
weixin_69761220的博客
05-17 340
图片整合技术（css-sprite）（雪碧图） ——将多张图片整合为一张图片，浏览器只需要加载一次，就可以同时应用多个图片 ——多个图片整合一张，也减小图片的总大小，提高请求的速度，用户体验也变好了 雪碧图的使用步骤 1:先确定好使用的图标 2:测量图标的大小 3:根据测量的结果，创建一个元素 4:将雪碧图设置为元素的背景 5:设置一个偏移量以显示正确的图片 拿下面图片进行演示： <!DOCTYPE html> <html lang="en"&gt..
你确定会用CSS Sprites（雪碧图）？
富朝阳的博客
02-19 3297
雪碧图也叫CSS精灵， 是一种CSS图像合成技术。通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。我们来看一张图片这张图片汇聚了10个小图片合成，每个小图片都有自己的像素定位点，那么如何生成雪碧图呢？CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。
CSS精灵图/雪碧图
m0_47195133的博客
12-19 275
CSS一文便知精灵图/雪碧图及其使用
css sprite精灵图（雪碧图）
qq_44216701的博客
12-07 552
什么叫css sprite css sprite 相信有很多人没听说过这个这个词，我第一次也是一样。经过后面的了解，知道这个在国内被人称作css精灵，还有的称为雪碧图。是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时...
css雪碧图使用
forgiveForever的博客
11-20 306
雪碧图，放大 缩小
CSS雪碧图的作用以及加载方式（代码示例）
大剑师兰特的GIS世界
04-11 1906
CSS Sprites 是一种优化网页加载速度的技术，通过将多个小图标或背景图像合并到一张单独的大图中，然后通过CSS的`background-image`属性引用这张大图，并结合`background-position`属性来精准地定位显示其中每一个小图标的背景位置。
css雪碧图不能使用百分比,科技常识：CSS雪碧图（精灵图）使用
weixin_39884832的博客
08-03 145
今天小编跟大家讲解下有关CSS雪碧图(精灵图)使用 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS雪碧图(精灵图)使用 的相关资料，希望小伙伴们看了有所帮助。1：css雪碧图：css雪碧图 即 css Sprites，也有人叫它css精灵图。2：雪碧图的由来：一个网站的页面需要大量的小图片或者小图标，但是大量的图片如果放在服务器上，每次当打开网站并且向服务器发送请求，那么请求的次...
css sprite 雪碧图生成小程序
04-28
2. **CSS定位**：通过CSS的`background-image`属性设置雪碧图的URL，再利用`background-position`属性来定位要显示的图标在雪碧图中的位置。 3. **大小调整**：利用CSS的`width`和`height`属性调整元素大小，使之与...
雪碧图css工具
03-19
雪碧图（Sprite）是一种网页图像处理方式，它将多个小图像合并到一张大图（称为雪碧图或精灵图）中，然后通过CSS样式控制显示其中的部分图像，以此达到减少HTTP请求，优化页面加载速度的效果。在网页设计中，尤其是...
CSS中禁用DOM事件
bingmoujs的博客
08-26 924
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
【CSS】选择器
isun1的博客
08-29 1018
CSS 简介+选择器详细知识点
relation-graph实现图谱功能
qq_38599266的博客
08-29 204
【代码】relation-graph实现图谱功能。
CSS学习
2301_77205900的博客
08-28 867
CSS全称Cascading Style Sheets一种样式表语言，为html标签修饰定义外观，分工不同CSS与HTML关系html是网页的内容css是网页的样式（结构）
tailwindcss
最新发布
readmancynn的博客
08-31 1170
Tailwind CSS 是一个可定制化的 CSS 框架，最大的特点是功能类优先，和我们知道的bootstrap，element ui，antd，veui等框架一样。将一些CSS样式封装好，用来加速我们开发的一个工具。简单理解 TailwindCSS 就是 CSS 的 lodash, 他是一个增强工具类，你可以用原子类的方式写样式，也可以基于 PostCSS 作为工具函数做 Mixin。
Nuxt 项目实战 - 15：自定义unocss规则，让编写样式更高效
Potter：I am not for learning and learning, but for study and work
08-28 431
看到这个你发现问题了，由于我们颜色变量引用的是16进制颜色值，然后rgba的参数是4个，而且是用逗号隔开。可能你会想编译后改样式，类似webpack的css loader一样，但是我们会失去unocss的提示，在开发的时候还是很不方便。如果你有兴趣，欢迎加入你的加入，一起完善这个工具。，可以帮你一键将markdown发布至多平台，方便大家更好的传播知识和分享你的经验。说明：你可能会想到改unocss的规则，那么我们来试下。完美实现我们想要的效果，这样就可以更开心的写样式了。最近我开源了一个文章助手。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值