cvmachine.com - 申博开户网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:定位+精灵图时,精灵图缩放用法

定位+精灵图时,精灵图缩放用法

2019-03-31 21:20:34 来源:www.cvmachine.com 【

定位+精灵图时,精灵图缩放用法

问题背景

定位+精灵图时,精灵图缩放用法
在精灵图的原图中,这个标志只有11px11px,但我想放大成33px33px

讲解

修改前

定位+精灵图时,精灵图缩放用法

// An highlighted block
  <div class="bg">
    <a href="#" class="left"></a>
    <a href="#" class="right"></a>
  </div>
// An highlighted block
    .left {
      display: block;
      width: 11px;
      height: 11px;
      position: absolute;
      background: url("images/sprites3.png") no-repeat;
      background-position: 0 -85px;
      background-size: 152px 144px;
      top: 50%;
    }

这里我们看到左a标签太小,需要缩放。
思路:
1.缩放a的width,height
2.将background-size,缩放相应的倍数
3.background-position,也放大三倍

修改后

// An highlighted block
    .left {
      display: block;
      width: 33px;
      height: 33px;
      position: absolute;
      background: url("images/sprites3.png") no-repeat;
      background-position: 0 -255px;//原本 0 -85px
      background-size: 462px 432px;//原图152*144,在这里放大三倍
      top: 50%;
    }

定位+精灵图时,精灵图缩放用法

 
 

本文地址:http://www.cvmachine.com/a/question/100179.html
Tags: 精灵 定位 图时
编辑:申博开户网
  • 上一篇:物联网将终结公共云
  • 下一篇:没有了
  • 关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部