anyuan2002.com - vwin网

查找: 您的方位主页 > 网络频道 > 阅览资讯:定位+精灵图时,精灵图缩放用法

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

2019-03-31 21:20:34 来历:www.anyuan2002.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.anyuan2002.com/a/question/100179.html
Tags: 精灵 定位 图时
修改:vwin网
  • 上一篇:物联网将完结公共云
  • 下一篇:没有了
  • 关于咱们 | 联络咱们 | 友情链接 | 网站地图 | Sitemap | App | 回来顶部