什么是css精灵图(sprite)？css精灵图怎么使用？下面本篇文章就来给大家介绍一下css精灵图的使用。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。...在了解精灵图怎么使用前，我们要先知道什么是精灵图。只有先知道什么是精灵图，了解精灵图的原理了，我们才可是说使用精灵图。 什么是css精灵图(sprite)？...css精灵图(sprite)直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。...实例 精灵图表： 代码示例： html代码： Firefox Chrome Explorer Opera Safari css代码：ul.menu { list-style-type: none;...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/138980.html原文链接：https://javaforall.cn
精灵图的使用 我们在制作网页的时候有些图片是在一起的，没有办法进行插入图片，这样精灵图的使用就帮助我们解决了这一问题。...一下方式为例： 图片： 精灵图使用的代码图片： 具体为： .good{ height:30px; margin-left:-5px; background:url(image...效果图如例： 精灵图主要就只有三句：宽/高、 背景图，坐标。...宽/高 ： width:36px; height:30px; 背景图： background:url(image/icon.gif) no-repeat; 坐标： background-position...:-3px -130px; 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/145998.html原文链接：https://javaforall.cn
精灵图 什么是精灵图： css精灵(CSS sprites),是一种网页图片应用处理技术。...主要是指将网页中需要的零星的小图片集成到一个大的图片中 应用的原因： 1.减少对浏览器的请求次数，避免网页的延迟 2.方便小图标的统一管理 精灵图的制作： 1.软件：ps 2.制作方法：...新建透明图层 添加参考线将画布划分，将小图标放入划分好的格子中 精灵图的使用： css精灵图需要配合背景的图片和背景定位 1.引入精灵图 .basic{ background-image:url(...0px } .sprite2{ background-position:160px 160px } 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/132715.html
DOCTYPE html> ... </html
什么是精灵图？ 就是将几张较小的图片放在一张大图上 为什么要有精灵图？...最早的时候网速十分有限，为了提升用户体验，我们会将一张大图分解成多张小图来提高页面打开速度，但是网速得到了提升，为了能够让服务器承载更多的请求，我们要减少浏览器对服务器的请求，最直接的方式，就是将多张较小的图片放在一张大图上...而将多张小图放到一张大图上的操作就叫做精灵图，也可以叫做雪碧技术 也叫做css sprite 精灵图的使用 一张大的图片上有很多小的图片，那么如何将这个小的图片拿出来呢？...比如：我们要html页面上放一个div，宽高为图片的搜索按钮的宽高 3.将精灵图设置为容器的背景图片，并且根据图片所在的位置将背景图片进行平移 制作精灵图 1.精灵图必须是一些小的图片 2.精灵图的多个小图之间一定要留有足够的间隙...3.精灵图的大小一定要大于所有图片中最大的那个 4.完成精灵图以后一定要在精灵图下方留有足够的空隙，方便将来再次添加其它的精灵图 5.如果是页面上一个像素的背景图片不要放在精灵图上面 Iconfont
url(…/images/sprite-search.png) no-repeat; } .search em:hover{ background-position: -30px 0; /* 精灵图第一个值是...X轴的值 第二个值是Y轴的值，基本上都是负的多少多少 */ } 精灵图本质： 用一张大图包含所有小图，最关键的地方在于使用backgrond-postion属性精确定位 发布者：全栈程序员栈长，转载请注明出处...：https://javaforall.cn/139963.html原文链接：https://javaforall.cn
之前就发现一些网站把所有的小图标拼接在一张图片中，但是一直不知道这是怎么做到的，今天特地了解了一下，才知道这种用法叫做精灵图。...具体步骤： 1，创建合适大小的容器 2，将拼接的大图作为容器的背景，并设置为no-repeat 3，改变背景的位置 对于改变背景的位置我们需要知道小图标在大图片的的坐标（以大图的左上角为原点），例如如果小图标在大图中的坐标是...(10,20)，那么将背景图片向左移动10px,向上移动20px就可以抵消小图标在大图的位置。...获取这个坐标可以用PS中的切片工具，将小图标选择出来后右击选择编辑即可看到小图标的坐标 完整源码如下： *{...图标5 图标6 </html
精灵图技术 why? 1.减少请求次数，提高界面加载速度 what?...1.确定显示小图片的那个盒子的宽高 2.以背景的方式插入精灵图 background-image：url(); 3.移动图片的定位位置 background-position：xpx ypx 向上移动以及向左移动...位置肯定是负值 注：background-position： 水平/px 垂直/px 打开PS,打开所要用的精灵图。.../资料/精灵图应用_看图王.png); background-repeat: no-repeat; background-position: -303px -13px； !...hover{ background-position: -128px -217px ; } 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/137952.html
(指定不重复)， background-position(确定小图在精灵图中的位置，必须精确定位) 接下来看一下一些大型网页是否使用了精灵图 如淘宝页面 通过审查元素，查看右边小图标是否使用了精灵图...在观察html代码，发现他还有一个tbh-icon的类，通过Style我们可以看到tbh-icon引入了一张背景图片，打开背景图片链接 如下，一张图片包含了很多个小背景图，这便是【精灵图】 很多大型网页都使用了这种技术...将鼠标置于选取图片的左上角 如图得到图片的大小及位置信息 在html文件中 ```php 效果图 制作精灵图 制作精灵图就是将小图标放图一个大的背景中即可，这里就不一一阐述，精灵图制作遵循一下原则 1.精灵图必须为透明背景 2.精灵图中个各个小图应该有一定的间距 3.精灵图底部应该预留位置方便以后添加
说到精灵图（雪碧图），大家肯定和我一样觉得这个很新鲜。在学习了有关精灵图（雪碧图）的一些知识后，就来和大家讨论一下，我个人对精灵图（雪碧图）的一些理解和实现方法吧。...1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。...2、精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度...例如这是一张大的精灵图，我们现在用它来拼出我们想要的字母，例如ANDY 最终效果： 其实说白了就是将精灵图设为一个大背景，然后通过background-position来移动背景图，从而显示出我们想要显示出来的部分。
DOCTYPE html> 40-CSS精灵图 <style...-- 1.什么是CSS精灵图 CSS精灵图是一种图像合成技术 2.CSS精灵图作用 可以减少请求的次数, 以及可以降低服务器处理压力 3.如何使用CSS精灵图 CSS的精灵图需要配合背景图片和背景定位来使用...--> 41-CSS精灵图练习 </html
js循环精灵图 循环精灵图可以不用在给每一个小块一 一的修改位置。...主要原理是找到整张的背景图与li的下标的数学关系 左侧是一大张背景图 右侧是成品是预览图 这个背景图的位置其实是有规律的，每两张之间间隔一个固定长度 为20px，小图标的长度为24px，我们就可以得出这个间隔...然后使用这个间隔移动这个大背景图的位置达到精灵图的效果。我们的每一个span中都会有一个 background-image 因此我们只需要关注 大背景图的纵坐标上的移动。 ul...> 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/142018.html原文链接：https://javaforall.cn
-spacing:5px; $Icon-sprite-dimensions:true; //每个精灵图生成对应的类设置了宽度高度，数值等于精灵图的宽度高度； $Icon-repeat：no-repeat...Icon-sprite-height(图标的名字)/Icon-sprite-width(图标的名字) //给一个特殊的精灵图设置尺寸，就是读取精灵图的大小；width： $icons-sprite-base-class...@import “Icon/*.png”; //告诉compass更具Icon文件夹下面的png图片生成精灵图； @include all-Icon-sprites;调用混合器生成每个精灵图的样式...，如果要个别生成可以这样写，@include 装图标的文件夹名-sprite(小图标的名称); 还有很多的compass提供的精灵图辅助器我就不一一列举，上面的是比较常用的， 注意：所有的配置都是要在引入精灵图之前配置...，否则无效或者报错； 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/135681.html原文链接：https://javaforall.cn
精灵图简介 1.精灵图（雪碧图） （1）问题：精灵图就是将很多的小图标合并到一张较大的图片中，那精灵是啥意思呢?(为此笑了一下午的我) 。...（2）精灵图也称雪碧图，由于大型网页首次加载需要时间，如果再加之加载小图标的时间，则会严重影响到用户体验。所以，考虑到在同一时间内，服务器拥堵的情况，使用精灵图来解决这一问题。...那么怎么制作精灵图呢 2.使用ps制作精灵图的详细步骤 示例：将如下图图片中的四个图标合并为一张精灵图。...根据下图将其他图标拖入上图中指定位置（以mobile1.png为例） 拖动完成效果 将其他小图标也拖入，如下完成 （5）导出：文件–导出–存储为web所用格式（选择png-24格式） 至此精灵图的制作步骤已经完成...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/134040.html原文链接：https://javaforall.cn
DOCTYPE html> <meta name="viewport" content="width=device-width...css<em>精灵</em><em>图</em>： 40-CSS<em>精灵</em><em>图</em> 注意一下,<em>精灵</em><em>图</em>都用负数啊.记住,<em>精灵</em><em>图</em>主要用的是定位·背景background-position 效果： ?
今天重点学习了CSS精灵图。 “CSS精灵”，英语css sprite，所以也叫做“CSS雪碧”技术。...css精灵有什么优点，就是减少了http请求。比如4张小图片，原本需要4个http请求。但是用了css精灵，小图片变为了一张图，http请求只有1个了。...DOCTYPE html> 2 3 4 5 精灵图练习...89 90 91 92 93 </html
一、什么是精灵图？ 什么的是精灵图呢？首先我们来看了一下京东官网的一个例子： 鼠标移入之前这个“相机”的是白色的，移入之后变为了红色： 这就是一个精灵图的案例。...素材只需要一张图片： 只要我们改变图片的位置，就可以实现“精灵图”。下面我们来利用CSS进行实现。...1、插入背景图片 在浏览器中的显示效果为: 2、进行定位 在浏览器中的显示效果为: 3、改变大小实现截取 在浏览器中的显示效果为: 4、利用背景图定位...“切换”图片 在浏览器中的显示效果为: 5、实现“精灵图”动态切换 利用获取焦点时改变样式的属性hover实现“切换”： 这样我们就最终实现了“精灵图”的CSS动态特效...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/135234.html原文链接：https://javaforall.cn
css精灵图技术是什么 1、将页面所涉及的所有零星背景图像集中到大图中，然后将大图用于网页。用户访问页面时，只需向服务器发送一次请求。...DOCTYPE html> Title <div...("abcd.jpg") no-repeat -368px -417px; width: 102px; height: 112px; } 以上就是css精灵图技术的介绍，希望对大家有所帮助。
DOCTYPE html > < html > < head > < meta charset= “utf-8” /> < meta http-equiv= “...X-UA-Compatible” content= “IE=edge” > < title >背景图片的精灵图的使用 </ title > < meta name= “viewport...– 精灵图使用（重点） ☞浏览器中的坐标系 圆点以右为正方向，圆点以下为正。 ☞CSS精灵是一种处理网页背景图像的方式。...精灵图也是一种背景图片 ☞精灵图的使用 ◆使用fw一定要用打开的方式打开精灵图 ◆使用精灵图作为背景图片的时候，常与background-position配合使用 ◆测量精灵图中的元素的坐标使用矩形选择器...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/132972.html原文链接：https://javaforall.cn
图色操作是按键精灵中最核心的功能，因为如果单纯的靠坐标与延时去编写脚本，这样的脚本会因为不同手机的性能和网络表现出不同的差异。 1.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
