css sprite(精灵图)的 定位和缩放 详解

css sprite(精灵图)的 定位和缩放 详解

  • 项目演示

在这里插入图片描述

精灵图

1.定位

      background-position;

2.缩放

      background-size;

  • 注意(常见误区)! :
          1.必须使用backgroud-url()进行图片的引用,而不能使用<img src="">
          2.缩放图片是对整个图片的缩放,所以顺序应为先缩放再定位,比如我想获得精灵图上购物车的图片,在再将图片缩小为3/4,应该将先整个图片的大小100px25px,缩小为75px19px,然后定位到56px*14px。

在这里插入图片描述

代码:

.basic{
        background-image:url(../../assets/img/tabbar/tabbaricon.png);
        width:27px;
        height:27px;
        background-repeat:no-repeat;
        background-size:108px;
        display:inline-block;
        margin-top: 3px;
        vertical-align: middle;

    }

    .sprite1{
        background-position: 0px 0px;
    }
    .sprite2{
        background-position: -27px 0px;
    }
    .sprite3{
        background-position: -54px 0px;
    }
    .sprite4{
        background-position: -81px 0px;
    }
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页