Question

考虑我的图像包含100个图标，大小为16x16。因此图像大小为1600x16。现在我想要一个HTML 5标记来显示nth图片。什么是HTML语法来定义要显示的图像的特定部分

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

Answer 1

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

Answer 2

一种简单的方法是约束父级的尺寸以裁剪图像......

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

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

</div>

尝试将边距顶部设置为负值以查看隐藏部分。

在HTML 5中显示图像的一部分

2 个答案: