zoukankan      html  css  js  c++  java
  • Css Sprite 图片等比缩放图片大小

    img图片大小80*40,即每张图片大小40*40,如何以20*20显示图片?
    1. 首先看下如何以40*40显示第二张图片:

    正常显示css代码
    .sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
    }
    .sprite-circle {
     40px;
    height: 40px;
    background-position: -40px 0;
    }
    正常显示html代码
    <i class="sprite sprite-circle"></i>
    

    2. 接下来以20*20显示第一张图片:

    等比例显示css代码
    .sprite {
        background-image: url(spritesheet.png);
        background-repeat: no-repeat;
        display: block;
        background-size: 40px auto;  //背景图片的宽度缩减到一半,高度自适应
    }
    .sprite-circle {     //图片大小缩小到一半
         20px;
        height: 20px;
        background-position: -20px 0;   //背景图片的位置也相应的缩减到一半
    }
    
    等比例显示html代码
    <i class="sprite sprite-circle"></i>
    

    3.总结:
    诀窍在于,背景图片缩小固定的比例,背景图片的偏移量也缩小相应的比例。

    一直走下去,不容易
  • 相关阅读:
    n的阶乘
    只出现一次的数字
    2的幂次方
    海康摄像头调用程序
    对象和Map转化gongju
    base64和图片的相互转换
    三员管理的定义
    关于注解的理解
    vue开发环境和生产环境里面解决跨域的几种方法
    thymeleaf 入门
  • 原文地址:https://www.cnblogs.com/lpy001/p/5954264.html
Copyright © 2011-2022 走看看