响应式下的雪碧图解决方案 - 活用background-size / background-position
一、概述
在传统的居中布局时,我们常用background-position这个属性来进行雪碧图的定位,在减少数据量的同时,保证准确定位。在移动端使用越来越重的现在,以往的传统定位,已经无法达到目的,那么是否有合适的解决方案呢?答案是有的,让我们先来了解background的两个属性:
background-position:背景图片相对容器原点的起始位置。详解可以查看另一篇博客:background-position 详解。
background-size: 规定背景图的尺寸;
语法:background-size: width height;
二、子图尺寸相同
background-position: a% b%; =》 background-position: x y;
其中:containerWidth为容器宽,containerHeight为容器高,bgWidth为雪碧图宽,bgHeight为雪碧图宽,
则存在(公式1):
x = (containerWidth - bgWidth) * a%
y = (containerHeight - bgHeight) * b%
2.1、场景1:传统布局
传统布局下,容器尺寸与子图的尺寸相同,由公式1可推出以下结论:
由于子图尺寸相同,得出(公式2):
bgWidth = xTotal * containerWidth;
bgHeight = yTotal * containerHeight;
其中xTotal为雪碧图横向的子图数量,yTotal为雪碧图纵向的子图数量。 由公式1、公式2可推导出(公式3):
a% = x / (containerWidth - bgWidth)
= x / (containerWidth - xTotal * containerWidth)
= x / (1 - xTotal) * containerWidth b% = y / (containerHeight - bgHeight)
= y / (containerHeight - yTotal * containerHeight)
= y / (1 - yTotal) * containerHeight 定位时,背景图的起始点,时常在某个子图的起始点上,所以可以推导出(公式4):
a% = x / (1 - xTotal) * containerWidth
= n * containerWidth / (1 - xTotal) * containerWidth
= n / (1 - xTotal) b% = y / (1 - yTotal) * containerHeight
= m * containerHeight / (1 - yTotal) * containerHeight
= m / (1 - yTotal)
其中,m、n一定是一个小于等于0的数。 需要得到预期结果,使用公式4,
起始位置:x=-1 * containerWidth,y = 0 * containerHeight;
so: n=-1,m=0;
子图数:xTotal = 3; yTotal = 2; 要得到第二张图的显示定位应该为:
a% = n / (1 - xTotal) = -1 / (1 - 3) = 50%
b% = m / (1 - yTotal) = 0 / 1 - 2 = 0%
width: 218px;
height: 218px;
background-position: 50% 0;
background-repeat: no-repeat;
2.2、场景2:响应式布局下
回顾公式1:
x = (containerWidth - bgWidth) * a%
y = (containerHeight - bgHeight) * b%
响应式情景下,containerWidth会缩放,而此时bgWidth的值不会变化,使得公式2无法得到。
解决该问题的关键是,使得bgWidth的大小,随着containerWidth的变化而变化。
再回过头看看background-size这个属性,它可以使得背景图根据容器的变化而变化,且它的百分比属性可以以父元素的百分比来设置背景图像的宽度和高度,从而达到父容器与背景图的一个对应关系。
如果需要获得公式2,那么需要将背景图按照怎样的方式变化呢?
当 background-size: 100% auto;时,得到的结果:
图2.3 100%
由此可看出,当xpos为100%时,背景图缩放到父容器相同大小。
当xpos为300%时,背景图缩放到父容器的3倍大,此时背景图与父容器的关系同场景一相同,从而可以应用公式2,此时的xTotal既代表子图横向的数量,也表示背景图横向的收缩比。
由此当是如下代码,亦可得到预期的第二张图:
width: 118px;
height: 118px;
background-size: 300% auto;
background-position: 50% 0;
background-repeat: no-repeat;
总结:在响应式下,且子图尺寸相同时,将background-size 的缩放比设置成与子图数量相同,再通过background-position可实现轻松定位。x,y任意方向设置缩放比,另一方向可使用auto值,实现背景图的等比例缩放。此例中,虽然子图的形状为正方形,但实际操作中,不要求。矩形一样可以按照同样的公式实现,因为纵轴和横轴的计算都是分开的,相互没有影响。
三、子图尺寸不同
在子图尺寸不同的情况下,通常我们不会使用百分比定位,而是选择具体值定位。 示例:
图3.1 不规则雪碧图
取到白色遮罩覆盖的花环:
图3.2 目标子图
3.1、场景3:传统布局下的定位
代码如下:
border: 1px solid red;
width: 282px;
height: 301px;
background-position: -369px -394px;
background-repeat: no-repeat;
直接使用具体值定位,较为简单,容器盒子的尺寸与目标子图的尺寸相同,定位位置为容器盒子在背景图中的偏移位置,结果与预期相符。
3.2、场景4:响应式下的定位
回到场景1,其中有三个定位的关键因素:
a、盒子尺寸;
b、盒子相对背景图的偏移位置;
c、背景图尺寸(决定目标子图尺寸、从而决定盒子尺寸);
在响应式下,通常盒子的尺寸会跟随屏幕的伸缩而变化,如何使得最初的定位,不会因为盒子尺寸的变化而发生改变呢?
回到示例图3.1,想象一下如果我们将背景图、容器盒子、定位位置三者一起进行伸缩,那么会怎么样呢?定位仍然在目标子图,不会发生变化。
在变化过程中,只要缺少一个因素,就会发生错位。因此解决问题的关键是:三个因素,等比例伸缩。
我们看下赋值:
盒子伸缩:width: newWidth; height: newHeight;
偏移伸缩:background-position: newX newY;
背景图尺寸: background-size: newWidth/auto auto/newHeight;
关于几个新值的计算:是一个换算过程,方法有多种,可以按照具体项目的换算方法进行。我使用的是hotcss的方法,只需要给出原尺寸,便可轻松实现转换,这里不再展开,有兴趣的同学,可以上github了解:hotcss。
图3.3 响应式下的定位
调试器中给出的代码是hotcss编译之后的结果,源码如下(px2rem为hotcss的一个转换函数):
.test {
margin: px2rem(100);
border: 1px solid red;
width: px2rem(282);
height: px2rem(301);
background-position: px2rem(-369) px2rem(-394);
background-size: px2rem(1024) auto;
background-image: url($imgpath + "temp/flower-3-new.jpg");
background-repeat: no-repeat
}
总结:雪碧图的四种情况在本文中都给出了解决方案,场景1、2给出了子图尺寸相同时的定位,其中使用到了%,大大减少了计算。%的使用,让我们不再关注原来的尺寸,这个换算的过程映射到了基于一种相对比例关系(子图数量)进行的计算。场景3、4解决了子图不同的情况,这时,需要我们拿到三组关键值:原背景图大小、原容器大小、原相对位移,再利用关键值实现伸缩后的映射,从而实现定位。
响应式下的雪碧图解决方案 - 活用background-size / background-position的更多相关文章
- Vue-cli3.0下的雪碧图插件webpack-spritesmith配置方法
在前端项目中,为了减少对图片的请求次数,一般而言需要进行雪碧图的配置.即将多张小图标合并成一张图片,这样页面中的小图标都在一张图片上,只需请求一张图片,就可以通过CSS设置各个小图标的显示,利于节省带 ...
- 移动端rem布局雪碧图解决方案 以及分享腾讯团队的在线雪碧图工具
先分享一下地址:http://alloyteam.github.io/gopng/ 使用的方法也很简单,将需要的小图标拖进去,全部拖进去后再调位置(每拖一个进去都会帮你排列好,但是没有间隔,所以全部拖 ...
- Vue-cli在webpack内使用雪碧图(响应式)
先执行install cnpm install webpack-spritesmith 文件位置 build\webpack.dev.conf.js 添加内容: const SpritesmithPl ...
- CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
- 移动端适配之雪碧图(sprite)背景图片定位
为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...
- 前端优化:css雪碧图实践应用详解
一 为什么需要使用雪碧图 二CSS雪碧图原理及应用 前端是接近用户体验的一个项目组成部分,合适的优化能够大大减少网页响应时间,合理的资源加载自然成为了工作中的要务,现在就结合实例讲解到底什么是css雪 ...
- shoeBox超实用的雪碧图(Sprite)图制作工具-使用
从前端优化说起 浏览器载入单张图片的速度基本取决于图片的大小,但是载入多张图片的速度却和另一个要素息息相关-网络请求数,在图片大小和一致的情况下,图片张数越少其请求数越少其载入速度也就越快.所以在使用 ...
- 用FSM一键制作逐帧动画雪碧图 Vue2 + webpack
因为工作需要要将五六十张逐帧图拼成雪碧图,网上想找到一件制作工具半天没有找到,就自己用canvas写了一个. 写成之后就再没有什么机会使用了,因此希望有人使用的时候如果遇到bug了能及时反馈给我. 最 ...
- 原创:CSS3技术-雪碧图自适应缩放与精灵动画方案
花了一个礼拜完成了慕课网定制的七夕主题效果,其中有一个没实现好的功能,就是雪碧图的自适应缩放 ps: 以下实现都是基于移动端的处理 原图如下: 人物是采用的是雪碧图,通过坐标绝对数据取值 问题很明显, ...
随机推荐
- Hadoop HDFS HA启动出现两个StandBy NameNode
可能是zkfc服务没有启动,正确的流程如下: 1.在nn001上格式化zkfc sudo -u hdfs hdfs zkfc -formatZK 2.在三个(或以上)节点上启动journalnode ...
- C#中字段、属性、只读、构造函数赋值、反射赋值的相关
C#中字段.属性和构造函数赋值的问题 提出问题 首先提出几个问题: 1.如何实现自己的注入框架? 2.字段和自动属性的区别是什么? 3.字段和自动属性声明时的直接赋值和构造函数赋值有什么区别? 4.为 ...
- 针对SQLServer数据库的通用访问类
Web.config中代码 <configuration> <connectionStrings> <add name="connString" co ...
- C#数据结构汇总
对C#涉及到的数据结构做了一下简单的汇总,若有遗漏,欢迎补充~~ 还是以学习为目的,在此只是简单的介绍一下,希望对大家能有所帮助,能力有限为了不误导大家,不做详细深入的解析,还望见谅,非常欢迎大大们补 ...
- 接口和抽象类的使用场景以及多类继承存在的问题(c#)
我们首先来看下抽象class能发挥优势的使用场景. 假设有一个Cars基类,具体型号的Car继承该基类,并实现自己独有的属性或方法. public class Cars { public string ...
- WinForm 窗体应用程序(初步)之三
进程: 进程,简单的说,就是让你的程序启动另一个程序. 1.Process.Start("calc");//启动计算器 弊端:只认识系统自带的程序,如果写错系统会崩溃. 2. // ...
- Exp4 恶意代码分析 20164323段钊阳
网络对抗技术 20164323 Exp4 恶意代码分析 1.如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. ...
- JUC中Executor基本知识
Future And Callable 引用 http://www.cnblogs.com/dolphin0520/p/3949310.html http://www.iocoder.cn/JUC/ ...
- “java.lang.NullPointerException”异常分析
1.父类定义的某个属性,没有被子类使用,或者在子类中,又重新定义一次. 2.因为调用了一个object的方法,且此object的reference为null:比如说:String a=null; // ...
- [HTML] <meta name="viewport" content="width=device-width,initial-scale=1.0">释义
<meta name="viewport" content="width=device-width,initial-scale=1.0">这是 HT ...