前端学习笔记69-雪碧图

最新推荐文章于 2024-02-19 06:00:00 发布
最新推荐文章于 2024-02-19 06:00:00 发布
阅读量264 收藏
点赞数 1
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45034895/article/details/116496008
版权

前端学习笔记69-雪碧图


前面提到会有闪烁问题，为了解决这个问题，可以把三种图片拼接成一张，就可以搞定。

在这里插入图片描述

<!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>
        a:link{
            display: block;
            width: 93px;
            height: 29px;
            background-image: url(../exercise/img/09/btn.png)
        }
        a:hover{
            background-position: -93px 0;
        }
        a:active{
            background-position: -186px 0;
        }
    </style>
</head>
<body>
<a href="js"></a>
</div>
</body>
</html>

从代码可以看到，鼠标移入和点击不再是加载新图片，而是，移动图片。这样就实现了上一节的功能，并且不会有首次加载的闪烁问题。
这个方法被称为CSS-Sprite，即雪碧图。

雪碧图使用步骤：
1确定要使用的图标
2测量图标大小
3根据测量结果创建一个元素
4将雪碧图设置为元素的背景图片
5设置一个偏移量以显示正确的图片

小欣CZX
关注
专栏目录
Cadence学习笔记1-原理图.pdf
11-16
Cadence学习笔记1-原理图.pdf
【前端小实战】百度新闻雪碧图及动画（CSS sprites）
qq_53569667的博客
01-13 2063
模仿百度新闻右侧电梯雪碧图效果，实现了雪碧图的应用。
你确定会用CSS Sprites（雪碧图）？
最新发布
富朝阳的博客
02-19 3920
雪碧图也叫CSS精灵， 是一种CSS图像合成技术。通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。我们来看一张图片这张图片汇聚了10个小图片合成，每个小图片都有自己的像素定位点，那么如何生成雪碧图呢？CSS Sprites一般只能使用到固定大小的盒子（box）里，这样才能够遮挡住不应该看到的部分。这就是说，在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS Sprites并不合适。
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
热门推荐
道阻且长，行则将至。
03-15 1万+
一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite） 一、什么是雪碧图？ 雪碧图（CSS Sprite）又叫CSS精灵图，是一种网页图片应用处理方式，他允许你将一个页面设计到 所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求，客户端显示一张图片都会向服务器发送请求，所以图片请求越多，造成延迟的可能性就越大，当页面有许多字体图标时，推荐使用CSS Sprite 。 想必大家都用过雪碧图吧，话不多说，看看雪碧图是啥玩意儿： 看看金立官网的雪碧图： 二、那
三分钟学会如何使用css雪碧图（Sprite）
MMccGrady的博客
09-07 2648
雪碧图是一种网页图片处理方式。我们制作一张网页往往需要用到很多的图片，如果都用img导入，每张图片都需要向服务器发送请求，图片多了，服务器的负担就大了，用户使用过程中延迟也会增加。雪碧图通过将小图片整合在一张大图中，这样访问页面时大大减少了向服务器发送请求的次数。 往下↓看
雪碧图的原理与实例解释
猛志的博客
10-16 3766
一、原理 1.多个图标组合成一张图片构成雪碧图，通过对不同部位的提取，实现不同效果显示 如下图（图1）： 2.雪碧图优点：加载一张图片在来对一张图片操作，相比于加载多张图片来说，占用资源更少，效率更快。 3.原理 （1）上图片左上角坐标为（0px 0px）,使用笛卡尔坐标系； （2）上图有10个图标，上下两行两两对应； （3）用一个与图标宽高相等的盒子来装一个图标，把图片设为盒子背景图片时整张图片都会显示在盒子里，这时要把图片大小放大500%； （4）当鼠标移到盒子上时，移动图片，显示光亮图标。把图标上下
前端学习笔记-ES6-ES11
05-26
ES6-ES11学习笔记
前端学习笔记-黑马程序员JS
01-09
"前端学习笔记-黑马程序员JS" 本资源主要介绍了 JavaScript 的基本概念和语法，包括变量、数据类型、运算符、流程控制、数组、函数、对象、内置对象等知识点。 变量 在 JavaScript 中，变量可以在三种位置书写：...
前端学习笔记-less
05-26
在前端开发领域，LESS（层叠样式表，Low-level Style Sheets）是一种预处理器，它扩展了CSS语言，增加了变量、嵌套规则、运算符...在阅读"前端学习笔记——less"时，应重点理解并实践这些概念，以充分利用LESS的优势。
ccnp学习笔记---stp
02-16
ccnp学习笔记---stp
CSS Sprite雪碧图
CamilleZJ的博客
05-22 7780
什么是雪碧图？雪碧图也叫CSS精灵， 是一种CSS图像合成技术；通俗来说：将小图标合并在一起之后的图片称作雪碧图，每个小图标的使用配合background-position来获取。如下：如上雪碧图，background-position使用定位如下X和Y轴，注：原点0，0 位置， 之后X和Y轴均为负值，定位到图片左上侧起点后根据width和height截取小图标为什么应用雪碧图？网站开发90%会用...
css3帧（雪碧图）动画实现
似水流年QC的博客
06-29 2694
所谓雪碧图就是一张图，包含了很多小图，可以通过这些小图实现一个动作，如下是一张雪碧图，我们可以通过CSS的animation来设置背景图片的位置，呈现出一种动态效果。代码实现 注意几点： steps(7) 是关键哦 关键帧只需设置0%（ background-position:0 0;），100%（ background-position:-700px 0;） 动画均匀地分7帧执行，每次都有固定相等的偏移量 雪碧图由7张图片拼成的 雪碧图的宽度是设置动画盒子的7倍 infinite 循环执行 bot
精灵图/雪碧图介绍
weixin_43368552的博客
06-13 2447
为啥精灵图又叫雪碧图？精灵图（英语：Sprite），又被称为雪碧图或拼合图。在计算机图形学中，当一张二维图像集成进场景中，成为整个显示图像的一部分时，这张图就称为精灵图[1]。常见碳酸饮料雪碧的英文名也是 Sprite，因此也有人会使用雪碧图的非正式译名场景：项目中将多张小图片，合并为一张大图片，这张大图片就是精灵图 优点：减少服务器接收发送次数，减轻服务器的压力，提高页面加载速度。 例如把八张小图片的请求变成一张图片的请求，减少请求，减轻带宽，减少服务器压力 精灵图的使用： 1.创建一个盒子，设置盒子大
前端研习录（14）——CSS雪碧图及字体图标讲解及示例说明
清风不渡
08-03 608
重拾前端记忆，记录学习笔记，现在进入CSS雪碧图及字体图标部分。以上便是雪碧图的使用方法及效果。以上就是字体图标的内容。
Web前端之背景、雪碧图
花&败
10-29 918
repeatrepeat-xrepeat-yno-repeattopleftrightbottomcentercenterborder-boxborder-boxautocovercontainscrollfixed可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的orginclip。
关于雪碧图
蜗牛先生
08-24 6527
前端新手在入门的时候，一定会听到一个名词，叫做“雪碧图”，什么是雪碧图呢？   注意：这个雪碧跟那个饮料雪碧不是一个玩意儿。。。   ▍含义 也叫CSS sprites精灵图，通俗来说就是有很多小图标合成的一张大的图片就做雪碧图。   ▍为什么要用雪碧图 在网页中使用雪碧图的主要目的是为了优化页面性能，因为页面中的每一张图片都需要提一次HTTP请求过去，当图片过多的时候会使得加载量...
雪碧图的概念及优缺点，以及行盒的简述
qq_43204488的博客
12-22 2946
什么是雪碧图？它的优缺点是什么？ 1.雪碧图的概念：实际是指CSS中的图片拼合技术，将多个背景图拼合在同一张图片上，在使用时按照需求对图片位置进行改动。 优点：当多个图片合成一张图片时，减少了加载网页时对图片的加载次数，减轻了服务器的压力，提高了页面加载的速度。 缺点：使用时需要注意设置的数据的准确性，避免在某些板块出现不相关的背景图，还有就是必须使用高分辨率的图片，避免图片放大后出现瑕疵；当某一...
雪碧图最佳实践
txiejun的专栏
08-30 2683
对于web开发人员来说，经常会处理网站上的小图标。为了减少请求次数和提高加载速度，把小图标合并成一张大图，然后利用相关技术呈现需要的图标部分。目前市面上最常用的小图标解决方案有以下两种： 图标字体 （svg sprite) 雪碧图（css sprite） 图标字体，不作为今天的讨论范围。今天主要探讨下雪碧图的基本原理和常见的几种实现方案，并最后给出笔者认为比较高效的雪碧图开发流程。什么是雪碧图雪碧图
【Web前端实操16】雪碧图（CSS精灵图）
qq_45498824的博客
01-28 860
CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。实现效果没有做很长，依次类推，可以慢慢根据距离做出雪碧图，如有不解，可以在评论区评论，共同进步。雪碧图一般会给一个完整的图片，主要利用。属性设置背景图像的起始位置。
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小欣CZX

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值