zoukankan      html  css  js  c++  java
  • 雪碧图的定位

    雪碧图:多个图片集成在一个图片中的图

    使用雪碧图可以减少网络请求的次数,加快运行的速度。
     
      首先需要给li设定一个恰当的固定的宽高
    比如{ 24px;height: 24px;}
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    需要用baocground-image: url();引入雪碧图
    利用background-position: X Y;对雪碧图进行移动定位;X为雪碧图x轴平移,Y为雪碧图y轴平移(xy根据具体情况调整)
    style{
      ul>li:nth-of-type(1){
        background-image: url("./sprite.png");
        background-position: 0 0;
        height: 24px;
         24px;
      }
      ul>li:nth-of-type(2){
        background-image: url("./sprite.png");
        background-position: 0 -44px;
        height: 24px;
         24px;
      }
      ul>li:nth-of-type(3){
        background-image: url("./sprite.png");
        background-position: 0 -88px;
        height: 24px;
         24px;
      }
      ul>li:nth-of-type(4){
        background-image: url("./sprite.png");
        background-position: 0 -132px;
        height: 24px;
         24px;
      }
      ul>li:nth-of-type(5){
        background-image: url("./sprite.png");
        background-position: 0 176px;
        height: 24px;
       24px;
      }
      ul>li:nth-of-type(6){
        background-image: url("./sprite.png");
        background-position: 0 -220px;
        height: 24px;
         24px;
      }
    }
    生成雪碧图后,通过background-position定位到当前的图片,如何设置当前图片的大小?

    发现设置background-size作用于整张图,一放大就全偏了,再定位也可以,不过不方便。

    而transform: scale();进行缩小和放大,这样可以很好地解决。

    励志成为前端王的男人
  • 相关阅读:
    PT100高精度测温电路 AD623+REF3030(转)
    STM32|4-20mA输出电路(转)
    串口通讯数据处理算法分析与实现(转)
    stm32_CAN总线知识(转)
    图像的灰度级和动态范围(转)
    图像bayer格式介绍以及bayer插值原理CFA(转)
    用oracle建表,必须注意Oracle 关键字(保留字)
    爬虫的定向爬取与垂直搜索
    开源的网络爬虫以及一些简介和比较
    SQL中的等号、IN、LIKE三者的比较
  • 原文地址:https://www.cnblogs.com/myshy/p/9534379.html
Copyright © 2011-2022 走看看