CSS Ẩn văn bản nhưng hiển thị hình ảnh?

Question

Tôi cần thay đổi thứ gì đó mà không cần chạm vào mã HTML.

Vì vậy, tôi có mã này trong HTML của tôi

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

và điều này trong CSS

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

này hoạt động tốt, nhưng twitter văn bản là có thể nhìn thấy dưới logo twitter, tôi không muốn những văn bản xuất hiện trong danh sách của tôi, tôi muốn thay thế chúng bằng hình ảnh trong CSS.

Có thể thực hiện mà không cần chạm vào Mã HTML không?

Answer 1

Làm cho văn bản trong suốt. Kể từ đó là một liên kết, bạn sẽ muốn sử dụng một vài bộ chọn để đảm bảo tất cả các trường hợp được giải quyết:

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

Edit: lựa chọn nào khác này, trong khi tiết hơn, có lợi ích của việc giữ biên giới tập trung (các chấm nhỏ xuất hiện khi liên kết được chọn) với kích thước và hình dạng của biểu tượng twitter. Ngoài ra, văn bản sẽ không được tiết lộ nếu được chọn và sao chép và dán. Nó trở nên vô hình và không thể chọn được. Đây là kỹ thuật này:

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

Answer 2

Bạn có thể sử dụng text-indent:

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

Answer 3

tôi có thể nhận được câu hỏi của bạn sai. Nhưng bạn muốn ẩn văn bản. Tôi sẽ sử dụng jQuery, tuy nhiên hãy nhớ rằng, <a> của bạn sẽ mất khối lượng.

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

Answer 4

sử dụng text-indent với một chút ma thuật trong nó :)

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

Vì vậy, bạn thấy văn bản được thụt vào nhưng vẫn là hình ảnh là stil l có thể nhấp được vì tôi đã đặt một lớp trong liên kết twitter;)

Answer 5

Hãy thử tạo font-size : 0px; trong css của bạn.