css：文本hidiing

我想隱藏鏈接中的文本，並使圖像只可見和圖像可點擊。css：文本hidiing

我正在使用下面的代碼，但文字似乎隱藏了。

<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; 
}

來源

2013-02-20 user244394

你不需要的<span>所有額外的標記-s，並且隱藏文本的方式比性能更好（text-indent: -9999px - DEMO

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-20 16:15:23

你缺少：

display:block;

你應該使用：

.cnn文本{ 顯示：塊; text-indent：-9999px; }

來源

2013-02-20 16:10:49 James

你可以對文本與跨度沿着插入<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-20 16:15:08 DarkAjax

我覺得有幾個方法可以做到你在說什麼。

這聽起來像你在說什麼只是有一個可點擊的圖像。如果是這樣的話，那麼我會建議把跨度錨定標記：

<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-20 16:27:59 ajb

缺省情況下一個跨度是內聯e字元素。寬度和高度屬性將無法按照您打算在.cnn-b範圍內使用。如果您將 <span class="cnn-b">更改爲<div class="cnn-b">，或者如James所示，在cnn-b span上使用display:block;而不是cnn-text span，這將解決您的問題。您的最終代碼應該是這樣的：

<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-20 16:36:38 dykstrad

css：文本hidiing

回答

相關問題