4

サイズが 16x16 の 100 個のアイコンを含む画像があるとします。したがって、画像サイズは 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 に答える