4

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

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

2 回答 2

6

使用图像作为背景并使用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-27T12:41:28.023 回答
-1

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

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

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

</div>

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

于 2013-10-27T12:45:57.317 回答