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>

最終效果圖

量圖軟件 Mark Man

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章