使用CSS3的background-size优化Sprites图显示
当我的Sprites图像是300px,如何指定background-size为32px呢?其实不难,只需要一点点数学计算,这是一个很初级的过程。
在我们的实例中,我们使用媒体社交图标.我想让他们都按16px x 16px的大小显示。我们将创建一个适合Retina屏幕设备的Sprites 图像,将图像尺寸翻倍(32px x 32px),并且保存他。为了保证普通显屏设备的图像显示,在这个图像的基础上做了一半的缩小。
在最初的CSS样式中,background-position的属性值都不需要进行任何设置,因为他们的默认值都是“0”,如下所示:
#social-icons .facebook {
background: url(images/social-sprite.png);
background-position-x: 0px;
background-position-y: 0px;
height: 16px;
width: 16px;
} #social-icons .facebook:hover {
background-position-y: -16px;
}
对于我们的Retina屏幕显示,我们必须声明一个Media Queries,该Media Queries专门针对Retina屏幕设备显示器。我们同时改变背景大小而不是宽度和高度。
因此,最关键的问题是,我们怎么知道background-size属性值要设置为多少?
这里有一个公式
高分辨率图像宽度 / 目标图像宽度 = X 原始Sprites图像宽度 / x = background-size的宽度值
实例说话
我们高分辨率下的图标是32px x 32px;
我们目标图像的宽度是“16px”;
我们Sprites图像的总宽度是“96px”
根据前面的公式 可以得知
32/16 = 2 96/2 = 48
最后的一件事情。我们只计算了背景图像的宽度值,为了确保背景图像缩放比例正常,我们将“height”值设置为“auto”。当然你也可以设置相的的值(设置background-sizer的宽度为auto,高度为具体值),但我发现设置宽度会比较容易。
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (max-moz-device-pixel-ratio: 2) {
#social-icons .facebook {
background: url(images/social-sprite2x.png);
background-position-x: 0px;
background-position-y: 0px;
background-size: 48px auto;
} #social-icons .facebook:hover {
background: url(images/social-sprite2x.png);
background-position-x: 0px;
background-position-y: -32px;
},
但是对于需要自适应的web端或是移动建议使用rem来定义background-size ,可以随着屏幕宽度来改变大小
使用CSS3的background-size优化Sprites图显示的更多相关文章
- Bzoj 2834: 回家的路 dijkstra,堆优化,分层图,最短路
2834: 回家的路 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 62 Solved: 38[Submit][Status][Discuss] D ...
- [十二省联考2019]字符串问题——后缀自动机+parent树优化建图+拓扑序DP+倍增
题目链接: [十二省联考2019]字符串问题 首先考虑最暴力的做法就是对于每个$B$串存一下它是哪些$A$串的前缀,然后按每组支配关系连边,做一遍拓扑序DP即可. 但即使忽略判断前缀的时间,光是连边的 ...
- CSS3中background属性的调整
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- CF1007D. Ants(树链剖分+线段树+2-SAT及前缀优化建图)
题目链接 https://codeforces.com/problemset/problem/1007/D 题解 其实这道题本身还是挺简单的,这里只是记录一下 2-SAT 的前缀优化建图的相关内容. ...
- 【BZOJ3681】Arietta 树链剖分+可持久化线段树优化建图+网络流
[BZOJ3681]Arietta Description Arietta 的命运与她的妹妹不同,在她的妹妹已经走进学院的时候,她仍然留在山村中.但是她从未停止过和恋人 Velding 的书信往来.一 ...
- 洛谷P3783 [SDOI2017]天才黑客(前后缀优化建图+虚树+最短路)
题面 传送门 题解 去看\(shadowice\)巨巨写得前后缀优化建图吧 话说我似乎连线段树优化建图的做法都不会 //minamoto #include<bits/stdc++.h> # ...
- 【ARC069F】Flags 2-sat+线段树优化建图+二分
Description 数轴上有 n 个旗子,第 ii 个可以插在坐标 xi或者 yi,最大化两两旗子之间的最小距离. Input 第一行一个整数 N. 接下来 N 行每行两个整数 xi, ...
- css3 背景background
Css3背景<background> Css3包含多个新的背景属性,它们提供了对背景更强大的控制.可以自定义背景图的大小,可以规定背景图片的定位区域,css3还允许我们为元素使用多个背景图 ...
- Nowcoder Hash Function ( 拓扑排序 && 线段树优化建图 )
题目链接 题意 : 给出一个哈希表.其避免冲突的方法是线性探测再散列.现在问你给出的哈希表是否合法.如果合法则输出所有元素插入的顺序.如果有多解则输出字典序最小的那一个.如果不合法则输出 -1 分析 ...
随机推荐
- 【ipv6惹的祸】curl 超时
偶然发现 最近在公司日志平台 总是可以看到很多关于php curl的错误信息 Operation timed out after 0 milliseconds with 0 out of 0 byte ...
- Tp验证码:$Verify = new \Think\Verify(); $Verify->entry(n);【参数n,页面有多个验证码时用】
一.验证码参数:(中文字符集和英文字符集在父类里面都可以取到,可修改) //1.生成验证码 $Verify = new \Think\Verify(); $Verify->entry(n);[参 ...
- xcode中使用正则表达式来搜索替换代码
有这样的需求: 类似于 GLOBAL_STR(@"请继续添加"); 这样的代码,需要批量修改为: GLOBAL_STR(@"请继续添加", nil); 这里使用 ...
- 在Hyper-V中安装和配置Ubuntu网络
http://www.abcde.cn/knowledgebase/845/Hyper-VUbuntu.html (文中的nameserver要改成自己路由器的IP:我的是192.168.2.1.) ...
- C#_基本类型
1.C#中的值类型包括:简单类型.枚举类型和结构类型. 2.C#中的引用类型包括:类(class).接口(interface).数组.委托(delegate).object和string. 3.调试时 ...
- ng-selected ng-change
<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Cont ...
- 一个简单的js实现倒计时函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- java://Comparator、Comparable的用法(按照要求将map集合的键值对进行顺序输出)
import java.util.*; public class Person implements Comparable<Person>//使Person的属性具有比较性 { priva ...
- SpringMVC常用配置-文件上传-基于Servlet 3.0
[2] http://www.cnblogs.com/weilu2/p/springmvc_MultipartConfigElement_tomcat_webapps_work.html
- tomcat,zookeeper,activeMQ,Kafka设置jvm参数
1,tomcat设置jvm参数 设置方法: 在tomcat bin 目录增加配置:setenv.sh #add tomcat pid CATALINA_PID="$CATALINA_ ...