1

<a>タグの要素タイプの背景画像としてスプライトを使用する必要があります。問題は、スプライトの一部（たとえば、17px x 17px）のみを表示する必要があり、コンテナーをより高くすることができることです。この場合、背景画像の1つと空のスペースではなく、必要な画像とその次の画像（表示したくない画像）を取得します。

表示したいスプライトの正方形のheightとを制限する方法はありますか？全体を設定widthすることはできません。 heightwidth<a> tag

例：

ここに画像の説明を入力してください

そして、私がやりたいのは、同じスプライト上にある2番目の画像の部分を表示しないことです（その唯一の例です。プロジェクトでは、行全体にテキストを表示するため、幅を変更することは解決策ではありません）

4

2 に答える 2

1

スプライトの高さと幅を設定します

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 17px;
       width: 17px;
}

編集：OPがscreehshotを置いた後

プロパティ:beforeと一緒に疑似セレクターを使用する必要がありますcontent

http://jsfiddle.net/SqbnC/でデモを作成します

a:before{
  background:url('http://pf.staticfil.es/hp/img/sprite2.png');
  width: 22px ;
  height: 22px;
  display:inline-block;
    content:"";
}

heightスプライトから表示するアイコンのサイズであるため、 andwidthを22pxとして指定しました

于 2012-09-05T10:02:37.503 に答える
0

cssクラスではバックグラウンド位置を使用する必要があります。例として..

.classsample{
background:url('YOUR IMAGE PATH') no-repeat 0 -20px;
height:10px;
width:10px;
}

divに表示したい画像部分に基づいて値0と-20を更新します。そして最後に、アンカータグにIMGタグを使用しないでください。上記のように、CSSクラスを介して画像を渡す必要があります。

<a class="classsample" href="#">TEXT</a>

アンカータグにテキストがない場合は、パディングを使用します。

于 2012-09-05T10:03:08.237 に答える