css sprite（精灵图）的定位和缩放详解

最新推荐文章于 2024-05-20 17:26:33 发布

雨客cs

最新推荐文章于 2024-05-20 17:26:33 发布

阅读量2.1k

点赞数 2

分类专栏： css 文章标签： css css3 html vue.js javascript

本文链接：https://blog.csdn.net/weixin_43540589/article/details/107803536

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;
    }