zoukankan      html  css  js  c++  java
  • 使用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;
       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 ,可以随着屏幕宽度来改变大小
  • 相关阅读:
    [转]Navicat Premium 12试用期的破解方法
    Redis禁用持久化功能的设置
    阿里云ECS安装的redis服务器,用java代码去连接报错。
    关于Jedis连接Linux上的redis出现 DENIED Redis is running in protected mode问题的解决方案
    修改了jdk在环境变量中的路径怎么cmd中的jdk版本没有变
    阿里云上部署tomcat启动后,通过http不能访问
    【终结篇】不要再问我程序员该如何提高了……
    我是怎么把一个项目带崩的
    eterm和easyfare的官网地址
    java UTC时间和local时间相互转换
  • 原文地址:https://www.cnblogs.com/tzz-ing/p/5920127.html
Copyright © 2011-2022 走看看