什么是css精灵图(sprite)？css精灵图怎么使用？下面本篇文章就来给大家介绍一下css精灵图的使用。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。...在了解精灵图怎么使用前，我们要先知道什么是精灵图。只有先知道什么是精灵图，了解精灵图的原理了，我们才可是说使用精灵图。 什么是css精灵图(sprite)？...怎么使用css精灵图(sprite)？ css精灵图(sprite)其实就是通过将多个图片融合到一张图片文件中，然后通过CSS background背景定位技术技巧布局网页背景。...使用精灵图的优点对于浏览器来说请求多张小的图片和请求一张大的图片当然是后者的性能更好，大大减少了浏览器向服务器的请求次数，减少了http请求次数，这也是精灵图被广泛使用的主要原因。...精灵图的创建比较麻烦，要计算好每个图片之间的距离和位置，如果做的不合理，那么使用时就会比较麻烦。
精灵图的使用 我们在制作网页的时候有些图片是在一起的，没有办法进行插入图片，这样精灵图的使用就帮助我们解决了这一问题。...一下方式为例： 图片： 精灵图使用的代码图片： 具体为： .good{ height:30px; margin-left:-5px; background:url(image...精彩活动每一天 因为我用的是，所以我在ol中输入class。 效果图如例： 精灵图主要就只有三句：宽/高、 背景图，坐标。...宽/高 ： width:36px; height:30px; 背景图： background:url(image/icon.gif) no-repeat; 坐标： background-position...:-3px -130px; 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/145998.html原文链接：https://javaforall.cn
DOCTYPE html> 40-CSS精灵图 <style...-- 1.什么是CSS精灵图 CSS精灵图是一种图像合成技术 2.CSS精灵图作用 可以减少请求的次数, 以及可以降低服务器处理压力 3.如何使用CSS精灵图 CSS的精灵图需要配合背景图片和背景定位来使用...--> 41-CSS精灵图练习 核心：负值只是控制图标在标签中的位置的。
精灵图 什么是精灵图： 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
什么是精灵图？ 就是将几张较小的图片放在一张大图上 为什么要有精灵图？...而将多张小图放到一张大图上的操作就叫做精灵图，也可以叫做雪碧技术 也叫做css sprite 精灵图的使用 一张大的图片上有很多小的图片，那么如何将这个小的图片拿出来呢？...比如：我们要html页面上放一个div，宽高为图片的搜索按钮的宽高 3.将精灵图设置为容器的背景图片，并且根据图片所在的位置将背景图片进行平移 制作精灵图 1.精灵图必须是一些小的图片 2.精灵图的多个小图之间一定要留有足够的间隙...3.精灵图的大小一定要大于所有图片中最大的那个 4.完成精灵图以后一定要在精灵图下方留有足够的空隙，方便将来再次添加其它的精灵图 5.如果是页面上一个像素的背景图片不要放在精灵图上面 Iconfont...图标使用
DOCTYPE html> ... </html
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中的切片工具，将小图标选择出来后右击选择编辑即可看到小图标的坐标 完整源码如下： *{
精灵图技术 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
使用精灵图 通过定义我们知道，css精灵其实就是将网页中的一些背景图像整合到一张大图中，我们需使用精灵图里面的某个小图片就需要通过css的background-image(引入精灵图)，background-repeat...在观察html代码，发现他还有一个tbh-icon的类，通过Style我们可以看到tbh-icon引入了一张背景图片，打开背景图片链接 如下，一张图片包含了很多个小背景图，这便是【精灵图】 很多大型网页都使用了这种技术...，所以我们还是有学习的必要 根据淘宝的精灵图我们试着来使用一下 假设我们要使用“飞猪”图片，上面提到我们要使用精灵图的小背景图 就需要通过background-postion设置精确位置，以“飞猪为例”...将鼠标置于选取图片的左上角 如图得到图片的大小及位置信息 在html文件中 ```php 效果图 制作精灵图 制作精灵图就是将小图标放图一个大的背景中即可，这里就不一一阐述，精灵图制作遵循一下原则 1.精灵图必须为透明背景 2.精灵图中个各个小图应该有一定的间距 3.精灵图底部应该预留位置方便以后添加
说到精灵图（雪碧图），大家肯定和我一样觉得这个很新鲜。在学习了有关精灵图（雪碧图）的一些知识后，就来和大家讨论一下，我个人对精灵图（雪碧图）的一些理解和实现方法吧。...1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。...2、精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了页面的加载速度...例如这是一张大的精灵图，我们现在用它来拼出我们想要的字母，例如ANDY 最终效果： 其实说白了就是将精灵图设为一个大背景，然后通过background-position来移动背景图，从而显示出我们想要显示出来的部分。
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
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
自定义函数调用并传入参数，参数可支持多个； Dim 变量1,变量2 变量1="我是字符串信息" 变量2=123 Call 子程序(变量1,变量2,"第三个参数",456) EndScript // 定义一个过程,可以在脚本中调用这个过程...返回值=自定义函数() TracePrint 返回值 EndScript Function 自定义函数() TracePrint "我是自定义函数,被你调用了" 自定义函数="把过程中想要返回的信息写这里
精灵图简介 1.精灵图（雪碧图） （1）问题：精灵图就是将很多的小图标合并到一张较大的图片中，那精灵是啥意思呢?(为此笑了一下午的我) 。...（2）精灵图也称雪碧图，由于大型网页首次加载需要时间，如果再加之加载小图标的时间，则会严重影响到用户体验。所以，考虑到在同一时间内，服务器拥堵的情况，使用精灵图来解决这一问题。...那么怎么制作精灵图呢 2.使用ps制作精灵图的详细步骤 示例：将如下图图片中的四个图标合并为一张精灵图。...根据下图将其他图标拖入上图中指定位置（以mobile1.png为例） 拖动完成效果 将其他小图标也拖入，如下完成 （5）导出：文件–导出–存储为web所用格式（选择png-24格式） 至此精灵图的制作步骤已经完成...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/134040.html原文链接：https://javaforall.cn
, 不会占用位置 插入图片会占用位置 背景图片有定位属性, 所以可以很方便的控制图片的位置 插入图片没有定位属性, 所有控制图片的位置不太方便 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录..., 那么推荐使用插入图片 效果： ?...css精灵图： 40-CSS精灵图 注意一下,精灵图都用负数啊.记住,精灵图主要用的是定位·背景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
精灵图可以减少网络请求次数，有效降低页面加载延迟。 如何生成精灵图？ 两个有用的站点： https://www.spritecow.com/ 可以选择、查看指定背景块的样式。...https://www.toptal.com/developers/css/sprite-generator 可以将小图片合成精灵图。...下载精灵图后，可以使用webp工具，将其转换为webp格式，进一步降低图片文件大小。 示例： 如何使用精灵图？...参与研发的音视频直播产品曾在腾讯 QQ 上线，为数千万人使用。从 0 到 1 创建课件标准，被团队誉为课件之父，官方评定为 Adobe 中国 15 位社区管理员之一。
一、什么是精灵图？ 什么的是精灵图呢？首先我们来看了一下京东官网的一个例子： 鼠标移入之前这个“相机”的是白色的，移入之后变为了红色： 这就是一个精灵图的案例。...我们这里不使用JS，只用一张图片，利用CSS实现。素材只需要一张图片： 只要我们改变图片的位置，就可以实现“精灵图”。下面我们来利用CSS进行实现。...4、利用背景图定位“切换”图片 在浏览器中的显示效果为: 5、实现“精灵图”动态切换 利用获取焦点时改变样式的属性hover实现“切换”： 这样我们就最终实现了...“精灵图”的CSS动态特效。...发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/135234.html原文链接：https://javaforall.cn
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
