假设我有一个图片包含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;}