【移动端适配之雪碧图(sprite)背景图片定位】的更多相关文章

移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样…

移动端雪碧图sprite的实现

移动端适配的时候,通常是用rem作为长宽单位,因此,在不同的设备下,元素的实际宽高(px)是不一样的,如果是单张图片作为为背景图片的时候,最为方便,只要设置背景图片的属性background-size:contain|conver|100%;都能够将图片盖住整个div. 其次如果用雪碧图的话,那么得将 背景图片的大小和位置改为rem单位.background-position:x.x rem  y.y rem;background-size : xxrem yyrem;此处就是将按照设计稿的px…

移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具

先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖进去后自己调) 然后点击右边绿色的make按钮即可 点击后,上面的选项会高亮,提示你制作好了, 点击PNG选项即可下载制作好的雪碧图, 点击css选项即可查看每个小图标在雪碧图中对应的x和Y位置 对于PC端来说,基本就完成了. 对于移动端采用rem布局的,则需要多一些步骤: 首先将对应的x和y位置转…

FIS 雪碧图sprite合并

1 安装fis(必须先安装node和npm):npm install -g fis3 2 构建项目发布到根目录下的output:fis3 release -d ./output 项目根目录:FIS3 配置文件(默认fis-conf.js)所在的目录为项目根目录. 3 sprite的配置文件(fis-config.js)如下: fis.match('::packager', { spriter : fis.plugin('csssprites') }); fis.match('*.css', {…

关于css雪碧图sprite

天气转凉了,又开始贪恋暖暖的被窝了. 早上不想起床的时候在被窝里看了有关于雪碧图的视频. 1.使用场景 V导航条,登录框img标签多次载入,性能低 X大图banner按需加载,如果做成雪碧图一次加载就会载入比较久 X纯色背景的按钮 X动态图片 总结:1.静态图片,不随用户信息变化而改变 2.小图片,3-5k 3.加载量比较大 优点:有效减少http的请求数量,加速内容显示 缺点:1.内存缺陷:2.页面缩放有暴露风险:3.对爬虫不友好 2.实现原理 同一张背景图,改变background-posi…

CSS——精灵图与背景图片定位

精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(CSS Sprites) 精灵图的定义: 1.很多图片融合在一张图上,通过背景定位的方式将图标显示在每个盒子中. 2.背景定位的方式主要通过控制x和y轴的值. 精灵图使用技巧: 1.一般情况:直接一个盒子,里面的背景图片是精灵图,使用时注意x轴和y轴. 2…

CSS Sprite雪碧图应用

在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更优的解决方案是:雪碧图sprite. 所谓雪碧图就是把我们所需要的所有小图片用CSS sprite或者PS工具拼接成一张大图片,然后通过元素的background-image.background-positon属性完成图片的定位. 为此,我做了个Demo. 在学习的过程中,遇到了背景图片定位的问题,也就是b…

CSS Sprite雪碧图的应用

CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 静态图片,不随用户信息的变化而变化. 小图片,容量比较小(2~3k). 图片加载量比较大. 目的 减少Http请求数量,加速内容显示.因为每请求一次,就会和服务器建立一次链接,而建立链接是需要额外的时间的. 使用 使用雪碧图之前,我们需要知道雪碧图中各个图标的位置. 从上面的图片不难看出雪碧图中各个…

前端工程师技能之photoshop巧用系列第五篇——雪碧图

× 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中.使用雪碧图的处理方式可以实现两个优点: [1]减少http请求次数 [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) 凡事都不完美,实现优点的同时也带来了缺点,即提高了网…

css中雪碧图(sprite)的使用及制作方法

雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一张图:  2.雪碧图的使用 首先确定要使用的图标的位置和大小(可以通过ps测量), 如下的雪碧图大小统一,排列规则 它们的大小均为30px*30px,第一个图标位置为0 0,第二个的位置为30px 0,依次... 样式可以这样写: 1 .box1 li:nth-child(1) { 2 width:…

移动端适配之sprite雪碧图背景定位

移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高倒也无所谓,但是我不能忍啊. 方法就是利用background-position百分比值替换rem值 要想得到定位的百分比值(n m),我们需要 元素的宽高(w h), sprite图的宽高(k g),我们需要显示icon的坐标(x y),公式如下: 1 n = -x / (w-k) * 100%…

css sprite，css雪碧图生成工具V3.0更新

V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 为什么要用这个工具 1.加快网页加载速度 浏览器接受的同时请求数是10个,如果图片过多会影响整体的视…

使用compass自动合并css雪碧图(css sprite)

本文转载自: 使用compass自动合并css雪碧图(css sprite)…

CSS Sprite 雪碧图制作

CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需要相关图标时,根据background-position设置坐标值,达到目的.…

CSS Sprite雪碧图

为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w…

Sprite(雪碧图)的应用

雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上. 使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求,这样一来,一是造成资源浪费,二是会导致访问速度变慢. 把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开,就解决了上述的两个问题. 我们来看看实现条件: 1.要有装图片的容器宽高 2.引用背景图的文件 3.精准定位改图(background-p…

compass框架的sprite雪碧图的用法简要

---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样做的好处是:减少了网站的HTTP请求次数 **compass如何合并雪碧图** 1. 把需要合并的图片(1.png,2.png,3.png…)放在images文件下的新建一个文件夹test 2. 在SCSS文件中 用 @import 指向这些上述图片们,然后compass会自动将这些图片们合并成一个…

【HTML+CSS】(2)CSS Sprite雪碧图

1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. 使用雪碧图能够降低http请求数量,加速内容显示.每请求一次,就会和server链接一次,建立链接时须要额外时间的. 3. 实现原理 使用background-position属性: 须要使用雪碧图的时候,设置x和y的值就能够了. 4. 实现方式: 一种方式是使用PS手动拼图: 还有一种方式是使用…

CSS Sprite、CSS雪碧图应用实例

CSS Sprites技术被国内一些人称为CSS雪碧图,其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置.   CSS 雪碧图技术不是什么新东西,在网页应用中已经有几年了,现在的网页开发在图标图片的应用上已经趋向于使用字体图标,这是一种比CSS雪碧图技术更优雅的图标应…

css sprite 雪碧图

使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导致访问速度变慢.这时候,把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开,就解决了上述的两个问题. 显示雪碧图的条件: 1)需要一个设置好宽和高的容器 2)需要设置background-position的值(默认为(0,0),也就是图片的左上角),即移动图片到自己想要的图标位置.…

使用雪碧图Css Sprite精灵 | 加速网页响应速度

什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它允许你将一个页面涉及到的所有零星图片都包含到一张图中,这样一来,当访问页面时,就只需要下载1张图片了,这显然大大减低了服务器请求压力. 这个技术加速网页响应速度,加速的关键,不是降低质量,而是减少个数.传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算.…

compass与css sprite（雪碧图）

什么是css sprite? css sprite,中文叫雪碧图,也有人喊CSS精灵,就是一种背景拼合的技术,然后通过background-position来显示雪碧图中需要显示的图像. MDN相关链接:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/CSS_Image_Sprites 优点:1.减少页面请求数 2.降低图片占用字节 缺点:1.拼图麻烦 2.后期维护麻烦 为什么使用compass? 最近项目中需要使用到很多小图片,想用…

web前端sprite，精灵图，雪碧图

css sprite 俗称:精灵图,雪碧图,指将整个页面不同的图片or图标合并在一张图上:优点:使用CSS Sprite 可以减少网络请求,提高网页加载性能,不会出现网页上端加载完毕下面还在加载中这一问题 缺点:如果后期更改其中某一图标,且其像素大小发生改变,需要重新对所有图标进行定位 精灵图制作: photoshop选择透明图层,将需要的图标和图片放入 测试用图: ​​​ <!DOCTYPE html> <html> <head> <meta charset=&…

compass制作sprite雪碧图

1.安装compass.(需要先安装ruby) 命令行:gem install compass 2.新建一个compass 项目 命令行:compass create myproject 3.在myproject中新建一个images文件夹,将需要转换的图片放入images新建的share文件中 并在scss文件中写入: @import "compass/utilities/sprites"; @import "share/*.png"; @include all-…

雪碧图（sprite）

雪碧图 是一种将网页上常用且不经常变动的小图标集中在一张大图中,根据网页需求来显示图片的技术. 可以提高网页加载速度,增加用户体验. 其原理是通过html块状元素建立一个满足需求的视图窗口,然后在窗口背景中载入处理过的.规则 的集成了小图的大图.图片加载后,根据需求来测量出需要小图的坐标,让其准确的显示在我们建立好的 窗口中. 它的好处是我们可以与后台交互一次,就可以满足网页上很多小图标的加载. 它的劣势在于,如果每次修改都会较为麻烦,容易出错. 所以,经常将它用在不怎么会经常改动的icon小图…

shoeBox超实用的雪碧图（Sprite）图制作工具-使用

从前端优化说起 浏览器载入单张图片的速度基本取决于图片的大小,但是载入多张图片的速度却和另一个要素息息相关-网络请求数,在图片大小和一致的情况下,图片张数越少其请求数越少其载入速度也就越快.所以在使用各种小图标或者小图片时尽量使用一张雪碧图来代替是加快页面载入速度的一种很好的解决方案. 但是雪碧图制作困难 所谓雪碧图就是将无数张图片通过约定的间距合成一张图片,在使用css或者img或者其他手段调用,根据其位置编制只显示对应单图片.首先一般使用的软件是很大众的PS,一张一张拼起来,而且还要注意固定…

compass做雪碧图

由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when deployed: #配置服务器路径 http_path = "http//:www.baidu.com/" #配置css sass images javascripts路径 css_dir = "public/stylesheets" sass_dir = "pu…

gulp将多张小图自动合成雪碧图

最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢实现雪碧图,所以就一直没有做这样的一个功能,但这次时间较为充分,于是就开始着手做雪碧图.做之前呢,首先想到的就是用PS将所有的小图放在一张大图上,可那么多的小图,一张一张往上放,岂不累趴,而且你还没有办法去确切的计算整张雪碧图的宽高,这不搞死人吗?于是就上网查资料,然后就有了本文很简单的生成雪碧图的…

Vue-cli在webpack内使用雪碧图（响应式）

先执行install cnpm install webpack-spritesmith 文件位置 build\webpack.dev.conf.js 添加内容: const SpritesmithPlugin = require('webpack-spritesmith'); 找到 文件内 plugins: 我是生成less文件后,单位rem实现雪碧图的响应式适配,用的是阿里方案页面内需引用flexbile.min.js(参考阿里手淘适配) 目录结构: 添加如下内容: 文件位置: build\w…

使用sass与compass合并雪碧图(二)

上一篇文章介绍了怎样使用compass合并雪碧图,生成的icons.css文件中单位是px,PC端可以直接在html文件中使用,但在移动端,我们需要根据不同分辨率的屏幕,来缩放图片大小,显然使用px单位肯定是不行的.所以需要做一下单位转换的工作. 移动端使用rem作为单位是最合适不过了.并不是使用了rem就可以,还需要做一些准备工作.我们都知道rem是基于html标签的font-size的,所以需要使用js动态的计算html的font-size.这里我使用淘宝的lib-flexible. 在上一…