在HTML中顯示圖像的一部分5

請考慮我有一個包含100個圖標，大小爲16x16的圖像。所以圖像大小是1600x16。現在我想要一個HTML 5標籤來顯示nth圖像。什麼是HTML語法來定義圖像的特定部分，以顯示在HTML中顯示圖像的一部分5

<img src="pic.jpg" height="16" width="16" offsetOrSomething=??/>

來源

2013-10-27 mehrandvd

AFAIK，這不能在HTML中完成，只有CSS。並且請注意，「CSS3」並不是一個真正有意義的術語，因爲沒有單一標準支持該版本號，只是具有各自版本的一堆不同的「模塊」，更重要的是，各種瀏覽器中經常部分實現。 – IMSoP

使用圖像作爲背景，並使用background-position移動它..

<span class="icon nth"></span>

和

.icon{ 
    width:16px; 
    height:16px; 
    display:inline-block; 
    background-image: url('pic.jpg'); 
} 
.icon.nth{ 
    background-position:-32px -16px; /*both left and top should be multiples of the icon dimensions*/ 
}

如果你有有要做得像你的榜樣，那麼你就需要再次的包裝是overflow:hidden然後將裏面的形象..

<span class="icon-wrapper"><img src="pic.jpg" style="left:-16px;top:-32px;" /></span>

和

.icon-wrapper{ 
    width:16px; 
    height:16px; 
    display:inline-block; 
    overflow:hidden; 
    position:relative; 
} 
.icon-wrapper img{position:absolute;}

來源

2013-10-27 12:41:28

只是注意到你的圖標只有水平順序..所以你應該在兩種情況下都將頂部設置爲'0'，然後將左側移動到-16的倍數 –

-1

一個簡單的方法是制約修剪圖像的父級尺寸...

<div style="height:10px; overflow-y:hidden;"> 

    <img src="pic.jpg" height="16" width="16" /> 

</div>

嘗試將邊距設置爲負值以查看隱藏部分。

來源

2013-10-27 12:45:57 loxxy

在HTML中顯示圖像的一部分5

回答

相關問題