0 
.comments 
{
    clear: both;
    background: url(./img/icons.png) 105px -230px no-repeat;
    width: 50px;
    height: 50px;
}

<div class="index-tools">
    <span class="comments"><?php comments_popup_link( __( '0', 'html5blank' ), __( '1', 'html5blank' ), __( '%', 'html5blank' )); ?></span>
    <span><?php edit_post_link(); ?></span>
</div>

画像が表示されない、理由がわかりません。.comments a{...} を試しましたが、まだ機能しません。「Inspect Element」を使ってパスを確認したところ、表示されているので、パスは正しいはずです。

なにが問題ですか？？

4

2 に答える 2

2

widthheightスパンはインライン要素であるため、スパンでは機能しません。PHP が何らかのコンテンツでスパンを埋めない限り、サイズはなく、何も表示されません。

したがって、インライン ブロックにすることをお勧めします。

.comments 
{
    clear: both;
    background: url(http://i43.tinypic.com/10psj2s.png) -105px -230px no-repeat;
    width: 50px;
    height: 50px;
    display:inline-block;
}

jsfiddleを参照してください。

そこでPHPからの出力をシミュレートしたので、背景画像の上にテキストが表示されますが、それを微調整する必要があると思います.

編集:大きなグラフィックから単一の長方形の領域が必要な場合は、グラフィックを通常の位置から左に上にスライドさせるため、位置を負にする必要があります。そうしないと、大きなグラフィックが背景の要素以外の場所に配置されてしまいます。
背景を繰り返す場合は、正の位置が機能します。

于 2013-07-07T06:27:05.530 に答える
0

バックグラウンドの位置が他の CSS によって上書きされる可能性があります。以下の!importantように試してみてください。

.comments 
{
    clear: both;
    background: url(http://oi43.tinypic.com/10psj2s.jpg) 105px -230px !important;
    width: 50px;
    height: 50px;
    display: block;
}

jsフィドル

于 2013-07-07T06:37:59.927 に答える