2

現在、タブのナビゲーション メニュー内に配置しているアイコンに問題があります。オンラインの画像 CSS スプライト クリエーターを使用しましたが、うまくいきました。問題は、画像が正しく表示されないことです。この問題を解決するにはどうすればよいですか? これが私のHTMLの例です 

<ul>
<li><a href="#tab-1" class="pngIcon sprite-category">1. Category</a></li>
<li><a href="#tab-2" class="pngIcon sprite-description">2. Description</a></li>
<li><a href="#tab-3" class="pngIcon sprite-images">3. Images</a></li>
<li><a href="#tab-4" class="pngIcon sprite-contact">4. Contact Info</a></li>
<li><a href="#tab-5" class="pngIcon sprite-final">5. Final</a></li>
</ul>

CSS cssのスプライト画像を作ったサイトから座標を取得しました

.sprite-final{  background-position: 0 0; width: 32px; height: 32px; } 
.sprite-category{ background-position: 0 -82px; width: 32px; height: 32px; } 
.sprite-contact{ background-position: 0 -164px; width: 32px; height: 32px; } 
.sprite-description{ background-position: 0 -246px; width: 32px; height: 32px; } 
.sprite-images{ background-position: 0 -328px; width: 32px; height: 32px; }


.pngIcon {
    padding: 0;
    background: url(http://webprolearner.ueuo.com/dropdown-menu/images/tabdetails.png) no-repeat top left;
    height: 32px;
    line-height: 32px;
    text-indent: 40px;
    margin: 0 5px;
    display: block;
}

CSSスプライト画像

ここに画像の説明を入力

4

3 に答える 3

1

まず、ID とクラスを確認する必要があります。ID は一意であり、コード内で繰り返されるべきではありませんが、クラスはまさにそのためです: 繰り返します。何よりも先にそれを変更します。

次に、css はカスケード スタイルであるため、どのスタイルを最初に読み込むかが重要です。クラスを定義していて、その後background: url(images/tabdetails.png) no-repeat top left;#pngIcon に命令を与えています (左上は に相当しbackground-positionます)。

そして 3 番目に重要な<a>ことは、画像を使用する代わりに に背景を指定することです。CSS が適用されていません。

于 2012-08-02T21:08:10.610 に答える
1

スプライトは背景専用です。img手始めにタグを削除します。次に、クラスをタグに.sprite-Final, ...直接追加し、各アンカーにクラスを追加します (#id としてではなく、id はページごとに 1 回しか発生しません!)。次に、CSS を次のように更新します。apngIcon

.pngIcon {
    padding: 0;
    background-image: url(images/tabdetails.png);
    background-repeat: no-repeat;
    height: 32px;
    line-height: 32px;
    text-indent: 40px;
    margin: 0 5px;
    display: block;
}

私はそれがトリックを行うべきだと思います...

于 2012-08-02T21:08:41.540 に答える
0

<a>特定のクラスを要素に割り当てる必要があります。次に、スプ​​ライトをそれぞれの背景として適用します。<img>そこに要素は必要ありません。

<li><a href="#tab-1" class="sprite-Final">1. Category</a></li>

次に、そのアンカー要素の左側にパディングを追加します。アイコンの幅は 32 ピクセルなので、35px のようなものかもしれません。これを行うと、「1. カテゴリ」というテキストが右に押し出されます。アンカーに調整を適用して、テキストが背景のアイコン画像とうまく揃うようにします。line-height: X;属性は垂直方向に配置するのが最適です。

于 2012-08-02T21:14:39.817 に答える