假设我有一个图片包含100个16x16大小的图标。所以图像大小是1600x16。
现在我想要一个HTML 5标记来显示nth图像。
定义要显示的图像特定部分的html语法是什么

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

最佳答案

将图像用作背景并使用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;}

10-05 20:56
查看更多