码迷,mamicode.com
首页 >  
搜索关键字:css-sprite    ( 111个结果
前端知识总结--性能优化
前端性能优化方案大体分为网络传输优化和页面内容优化, 网络方面 1、减少http请求 合并js文件 合并css文件 雪碧图的使用(css sprite) 使用base64表示简单的图片 2、减小资源体积 gzip压缩 js混淆 css压缩 图片压缩 3、使用缓存 DNS缓存 CDN部署与缓存 htt ...
分类:其他好文   时间:2019-05-14 15:00:48    阅读次数:148
Sprite(雪碧图)的应用
雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上。 使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求,这样一来,一是造成资源浪费,二是会导致访问速度变慢。 把很多 ...
分类:其他好文   时间:2019-03-17 00:53:22    阅读次数:207
css sprite
一.需求:提高首评加载速度,除了要将所有使用的图片,资源文件压缩,添加懒加载,还需要合并页面中使用到的所有图标到一张大图里,减少请求次数 二.实现:所有图标放到一张大图上,使用background定位获取到要显示的图标并控制元素的宽高即可 三.代码: .logo{ background:url('. ...
分类:Web程序   时间:2018-12-13 14:28:20    阅读次数:230
使用雪碧图(CSS sprite)
CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 使用雪碧图的优点有以下几点: 将多张图片合并到一张图片中,可以减小图片的总大小 将多张图片合并到一张图片后,只需一次网 ...
分类:Web程序   时间:2018-11-29 20:18:45    阅读次数:4285
雪碧图布局
最近公司项目需要增加一个需求,需要给组件设置动画类型,而每种动画类型都需要一个对应的动画图标,这里就使用了雪碧图。 一、什么是雪碧图 百度百科:CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显 ...
分类:其他好文   时间:2018-11-03 19:22:22    阅读次数:204
__x__(37)0909第五天__背景图按钮
link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载。 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验。 图片整合技术 CSS-Sprite 雪碧图: 将三张图片整合为一张图片,在不同的伪类中通过设置 background-positi ...
分类:其他好文   时间:2018-09-09 14:59:31    阅读次数:124
css 尺寸、边框、内边距、背景以及css Sprite
上节课回顾: HTML标签: 格式排版 p 段落 双br 换行 单hr 分隔线 单h1~h6 标题 双pre 原样格式化输出 双div 标签,无任何特殊意义 HTML标签 :文本 <em> 强调 倾斜 双<ruby></ruby> 加拼音 <rt></rt> <strong> 加粗 强调 双<mar ...
分类:Web程序   时间:2018-07-28 16:01:49    阅读次数:540
Css Sprite(雪碧图、精灵图)<图像拼合技术>
一、精灵图使用场景: 二、Css Sprite(优点) 减少图片的字节。 减少网页的http请求,从而大大的提高页面的性能。 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。 更换风格方便,只需要在一张或少张图片上修改图 ...
分类:Web程序   时间:2018-07-21 00:51:51    阅读次数:442
百度前端学习日记19——CSS sprite(雪碧图)
原理 如图所示,无黑影处为浏览器中会显示的部分,通过改变backgroundPosition来使显示的地方不同,从而达到更换背景的目的 更多 浅谈CSS Sprite和实例解析 CSS Sprites:实用技术还是生厌之物? ...
分类:Web程序   时间:2018-07-17 20:42:36    阅读次数:277
CSS Sprite的相关概念
原文 简书原文:https://www.jianshu.com/p/8ae3be23a642 大纲 1、什么是CSS Sprite 2、CSS Sprite的优点 3、CSS Sprite的缺点 4、CSS Sprite的使用 1、什么是CSS Sprite 1.1、CSS Sprites在国内很多 ...
分类:Web程序   时间:2018-07-08 13:32:02    阅读次数:181
111条   上一页 1 2 3 4 ... 12 下一页
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!