CSS隱藏文字但顯示圖像？

我需要更改某些內容而不觸及HTML代碼。CSS隱藏文字但顯示圖像？

所以我有這樣的代碼在我的HTML

     <span class="share"> 
          <ul> 
           <li>Share &nbsp;&nbsp;</li> 
           <li class="twitter"><a href="#">twitter</a></li> 
           <li class="facebook"><a href="#">facebook</a></li> 
           <li class="delicious"><a href="#">delicious</a></li> 
           <li class="friendfeed"><a href="#">friendfeed</a></li> 
           <li class="addthis"><a href="#">share</a></li> 
           <div class="clear"></div> 
          </ul> 
         </span>

，這在CSS

  .twitter {background:url('../images/tt.png') no-repeat; width:10px; height:14px; }

這工作得很好，但Twitter文本內容在Twitter的標誌可見，我不希望這些文本出現在我的列表中，我想用CSS中的圖像替換它們。

是否可以不觸摸HTML代碼？

來源

2011-08-08 Tumay

這裏：https://jsfiddle.net/hetr1whg/ –

使文本透明。因爲它是一個鏈接，你會想用幾個選擇，以確保所有情況下得到解決：

.twitter a, .twitter a:link, .twitter a:visited 
{ 
    color: transparent; 
}

編輯：這其他的選擇，而更詳細的，有保持焦點邊框的好處（當選擇鏈接時出現的小點）與Twitter圖標的大小和形狀相匹配。此外，如果選中並複製並粘貼，則文本將不會顯示。它變得不可見和不可選擇。這裏是技術：

.twitter a { 
    display: inline-block; 
    overflow: hidden; 
    width: 0; 
    height: 14px; 
    padding-left: 10px; 
}

來源

2011-08-08 00:06:58 gilly3

文本是可選的，寬度也有所不同，我有5個社會書籤鏈接相鄰，我想他們的填充是平等的。 – Tumay

@Tumay - 有趣的是，我的編輯在您發表評論之後的一秒鐘內完成，似乎完美地解決了您的評論。 :) – gilly3

第二種方法就像一個魅力！非常感謝:) – Tumay

你可以使用text-indent：

text-indent: -9999px; /* get rid of any text */

來源

2011-08-08 00:07:07

也移動鏈接。 Twitter圖標變得不可點擊。 – gilly3

-1

我可能有你的問題是錯誤的。但是你想隱藏文字。我會使用jQuery，但請記住，你的<a>將失去質量。

<script> 
    $('.twitter a').html(''); 
</script>

來源

2011-08-08 00:20:02

使用文本縮進與它一點點魔力:)

HTML：

  <span class="share"> 
       <ul> 
        <li>Share &nbsp;&nbsp;</li> 
        <li class="twitter"><a href="#" class="twitter">twitter</a></li> 
        <li class="facebook"><a href="#">facebook</a></li> 
        <li class="delicious"><a href="#">delicious</a></li> 
        <li class="friendfeed"><a href="#">friendfeed</a></li> 
        <li class="addthis"><a href="#">share</a></li> 
        <div class="clear"></div> 
       </ul> 
      </span>

CSS：

a.twitter { 
    background-image:url('../images/tt.png'); 
    display:block; 
    height:58px; 
    text-indent:-9999px; 
    width:200px; 
}

所以你看到的文字縮進但仍然是圖像是stil l可點擊因爲我已經把一個類放在twitter鏈接中;）

來源

2011-08-08 01:49:15 Zhianc

嘗試在你的css中製作font-size : 0px;。

來源

2014-02-25 07:26:09 Thiyagesh

CSS隱藏文字但顯示圖像？

回答

相關問題