使用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 分析 ...
随机推荐
- C++ 在Windows下截取整个屏幕 和 指定句柄窗口的屏幕
#include <windows.h> #include <stdint.h> #include <stdio.h> void ShootScreen(const ...
- android内存分析:heap Snapshot的使用
网上有很多讲解关于android studio中memory工具的使用,接下来我来说一段在项目中发生的实例:大家可以根据我的这个方法来分析自己项目中的问题 首先我们要通过手动先触发GC操作,点击mem ...
- c#实现万年历示例分享 万年历农历查询
cs.cs(类页面) using System;using System.Collections.Generic;using System.Linq;using System.Web; namespa ...
- JMeter学习-022-JMeter 分布式测试(性能测试大并发、远程启动解决方案)
在使用 JMeter 进行性能测试时,难免遇到要求并发请求数比较的场景,此时单台测试机的配置(CPU.内存.带宽等)可能无法支持此性能测试场景.因而,此时 JMeter 提供的分布式测试功能就有了用武 ...
- android中使用startactivityforresult跳转Activity后需要重写onBackPressed()方法
在android项目中经常会用startactivityforresult从一个Activity跳转到另一个Activity(这里指Activity_A和Activity_B),你可以从Activit ...
- randow()方法
Math库里的static(静态)方法random(),该方法的作用是产生0和1之间的一个double值. 注意产生的值包括0不包括1.
- Android中如何查看内存
文章参照自:http://stackoverflow.com/questions/2298208/how-to-discover-memory-usage-of-my-application-in-a ...
- mysqlbinlog 查看binlog时报错unknown variable 'default-character-set=utf8'
mysqlbinlog --no-defaults mysql-bin.000003 > /home/3.sql 下侧文字转自 http://www.cnblogs.com/cobbliu/p/ ...
- [原创]java WEB学习笔记105:Spring学习---AOP介绍,相关概念,使用AOP,利用 方法签名 编写 AspectJ 切入点表达式
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- (转)如何将本地git仓库上传到GitHub中托管+实践心得
Git——新手入门与上传项目到远程仓库GitHub(转) - Chen_s - 博客园http://www.cnblogs.com/Chenshuai7/p/5486278.html 注意的问题: 1 ...