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

oldbalck

于 2018-06-26 13:37:00 发布

阅读量338

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/3277156/blog/1835631

本文通过实例演示了如何使用CSS的background-position属性精确控制背景图片的位置。通过设置不同的坐标值，可以实现仅显示大背景图中特定部分的效果。

2019独角兽企业重金招聘Python工程师标准>>>

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