0

そこで、リスト内のテキスト (リンク) を画像に置き換えようとしています。これはうまくいかないようです

私のコード:

HTML:

<div id = "headeranna"> 
    <ul>
        <li><a href="#" id="annaklein">Vraag het aan Anna</a></li>
        <li><a href="#">Vraag het aan Anna</a></li>
    </ul>
</div>

CSS:

#headeranna {
    position: absolute;
    margin-left:410px;
    margin-right: 10px;
    margin-top: -90px;
    float:right;
}

#annaklein{
    display:block;
    width: 26px;
    height: 26px;
    background: url(small_anna.gif);
    text-indent: -9999px
}

これはまったく何もしません。何か不足していますか?

4

3 に答える 3

1

さまざまな種類の問題が発生する可能性があります。

  • 画像のURLが間違っています
  • 画像が大きすぎて、左上隅が透明であるか、背景と同じです
  • 等...

このバックグラウンド リンクを使用することをお勧めします。

background: transparent url(small_anna.gif) top left no-repeat;

または少なくとも試してください：

background: red; /* you can start with checking if you can see the background */

そして、コードをJsFiddleに配置する必要があるかもしれません。そこで問題を確認できます。

于 2013-05-12T14:02:59.650 に答える
1

引用符を使用することをお勧めします

  background: url("small_anna.gif");

ところで...

絶対位置の要素は、常に float から値 "none" を計算します。したがって、#headeranna float:right;の宣言は は必要ありません。

画像のパスがドキュメントに関連していることに注意してください

ここでフィドルが機能しているこの背景を見ることができます （例のターゲットのためだけにいくつかのマージン値を変更します）

于 2013-05-12T14:08:15.433 に答える
0

CSSでこれを試してください

#annaklein{
list-style-type: none;
list-style-image:url("small_anna.gif");
width: 26px;
height: 26px;
text-indent: -9999px;}
于 2013-05-12T14:46:47.920 に答える