1

リンク内のテキストを非表示にして、画像のみを表示し、画像をクリック可能にしようとしています。

以下のコードを使用していますが、テキストが非表示になっているようです。

<span class="cnn-b">

<a href="http://www.cnn.com" alt="cnn" title="cnn">
<span class="cnn-text">cnn</span>

</a></span> 
css

.cnn-b{
    width: 200px; height: 75px;
    background: url("cnn.png") no-repeat 0 0;
    text-indent: -9999px;
}
.cnn-text {
    text-indent: -9999px;
}
4

5 に答える 5

1

あなたが行方不明です：

display:block;

次を使用する必要があります。

.cnn-text {display：block; テキストインデント：-9999px; }

于 2013-02-20T16:10:49.653 に答える
1

-sの余分なマークアップをすべて必要とせず、-DEMOよりもテキストを非表示にするための<span>より良い（パフォーマンス面での）方法があります。text-indent: -9999px

HTML

<a href="http://www.cnn.com" alt="cnn" title="cnn" class="cnn">cnn</a>

CSS

.cnn {
    width: 200px; 
    height: 75px;
    display: inline-block;
    background: url(http://lorempixel.com/200/75) no-repeat 0 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
于 2013-02-20T16:15:23.710 に答える
0

あなたが話していることを行うにはいくつかの方法があると思います。

あなたが話しているのは、クリック可能な画像を持っているだけのようです。その場合は、アンカータグ内にスパンを配置することをお勧めします。

<a href="http://www.cnn.com" alt="cnn" title="cnn">
<span class="cnn-b"></span>
</a>

その場合、心配する必要があるのは、画像が表示されていることを確認することだけです。これは、CSSのスパンを正しい幅と高さにサイズ変更し、表示をブロックに設定することで実行できます（ブロックすると許可されます）幅を保つために）：

.cnn-b {
    width: 200px; height: 75px;
    background: url("cnn.png") no-repeat 0 0;
    display: block;
}

次に例を示します：http： //jsfiddle.net/CPUKP/1/

于 2013-02-20T16:27:59.813 に答える
0

<img>スパンと一緒display:none;に、テキストに要素を挿入できます。

<span class="cnn-b">
    <a href="http://www.cnn.com" alt="cnn" title="cnn">
        <span class="cnn-text">cnn</span>
        <img src="cnn.png" />
    </a>
</span>

css

.cnn-b{
    width: 200px; height: 75px;
}

.cnn-text {
    display:none;
}
于 2013-02-20T16:15:08.740 に答える
0

デフォルトでは、スパンはインライン要素です。widthおよびheightプロパティは、.cnn-bスパンで意図したとおりに機能しません。Jamesに変更 <span class="cnn-b">した場合、<div class="cnn-b">またはJamesが提案したようdisplay:block;に、cnn-textスパンではなくcnn-bスパンを使用すると、問題が解決します。最終的なコードは次のようになります。

<html>
<head>
    <style>
        .cnn-b{
            display: block;
            width: 200px; height: 75px;
            background: url("cnn.png") no-repeat 0 0;
            text-indent: -9999px;
        }
        .cnn-text {
            text-indent: -9999px;
        }
    </style>
</head>

<body>
    <span class="cnn-b">
        <a href="http://www.cnn.com" alt="cnn" title="cnn">
            <span class="cnn-text">cnn</span>
        </a>
    </span>
</body>
</html>
于 2013-02-20T16:36:38.343 に答える