background-position: -192px -48px;//图片定位详解

<style>
    .test1{
        background-image: url("./glyphicons-halflings.png");  //设置背景图(大图)
        width: 16px;//设置要显示图片宽度
        height: 16px;//设置要显示图片高度
        background-position: -192px -48px;//图片定位,在图片当中取负值,以左上角为中心原点
    }
    .test2{
        background-image: url("./glyphicons-halflings.png");
        width: 16px;
        height: 16px;
        background-position: -264px -144px;
    }
    .test3{
        background-image: url("./glyphicons-halflings.png");
        width: 16px;
        height: 16px;
        background-position: -96px -144px;
    }
</style>
<div class="test1">
</div>
<div class="test2">
</div>
<div class="test3">
</div>

最终效果图url

量图软件 Mark Manspa

相关文章
相关标签/搜索