6

すべてのアイコンをスプライトに追加しました。ここで、そのスプライトの 1 つのアイコンとリンクを表示する必要があります。スプライトを追加してその背景位置をリンクに設定すると、リンクの背景はすべてスプライト スプライトになります。 ここに画像の説明を入力

a{
    background-image:url('sprite.png'); 
}
.sprite_link_icon{
    padding-left: 20px;
    background-position: -36px -10px
}
<a class="sprite_link_icon" href="">test link test</a>

スプライトの幅と高さを設定して、アイコンを 1 つだけ表示するにはどうすればよいですか?

「a」タグに 2 つの div を追加する唯一の方法はありますか? まず、スプライト アイコンと幅と高さが設定された div と、他のテキストでは?

<a href="">
    <div class="sprite_link_icon" style="width: 10px; height: 10px;"></div>
    <div>test link</div>
</a>
4

3 に答える 3

3

:beforeまたはを使用:afterして、実際の背景を 1 つのアイコンの正確なサイズの別の (疑似) 要素に移動できます。

このようなもの：

.icon {
  /* nothing special here, just a dynamic element,
     maybe with a fixed height? */
}
.icon:before {
  content: '';
  display: inline-block;
  height: 16px;
  width: 16px;
  background: url(...) etc;
  margin-right: .25em; /* might not be necessary due to inline-block */
}

フィドル：http://jsfiddle.net/rudiedirkx/RG3Kd/（適切なスプライトが手元にないため、サイズが間違っています）。

于 2013-05-06T18:46:00.373 に答える
0

このコードをスタイリッシュに使用してください。

a
    {
        background-color:#00cc00;
        padding-left:20px;
        }

    a span
    {
        background-color:#fff;            
        }

次に、このhtml：

<a href="#"><span>test link</span></a>
于 2013-05-06T19:03:30.337 に答える
0

スプライトを行うときは、要素の幅と高さがどれくらいになるかを気にする必要があります。

「a」タグにスパンを追加し、特定の幅と高さで背景を追加すると、問題を解決できます。または、スプライトを再配置できます。

于 2013-05-06T18:49:12.803 に答える