सीएसएस टेक्स्ट छुपाएं लेकिन छवि दिखाएं?

Question

मुझे 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> 

में इस कोड है और इस सीएसएस में

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

यह ठीक काम करता है, लेकिन चहचहाना पाठ चहचहाना लोगो के अंतर्गत दिखाई दे रहा है, मैं नहीं उन चाहते हैं ग्रंथों को मेरी सूची में दिखने के लिए, मैं उन्हें सीएसएस में छवियों के साथ बदलना चाहता हूं।

क्या एचटीएमएल कोड को छूए बिना करना संभव है?

Answer 1

टेक्स्ट पारदर्शी बनाएं।

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

संपादित करें:: यह दूसरा विकल्प, अधिक वर्बोज़ जबकि, ध्यान सीमा रखने को लाभ मिलता है (चूंकि यह एक कड़ी है, तो आप यकीन है कि सभी मामलों संबोधित कर रहे हैं बनाने के लिए कुछ चयनकर्ताओं का उपयोग करना चाहेंगे ट्विटर आइकन के आकार और आकार के लिए जब कोई लिंक चुना जाता है तो दिखाई देने वाले छोटे बिंदु)। साथ ही, अगर चयनित और कॉपी और चिपकाया गया तो पाठ प्रकट नहीं किया जाएगा। यह अदृश्य और अचयनित हो जाता है। यहाँ तकनीक है:

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

Answer 2

आप text-indent इस्तेमाल कर सकते हैं:

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

Answer 3

मैं संभवतः अपने प्रश्न गलत मिला है। लेकिन आप पाठ को छिपाना चाहते हैं। मैं jQuery का उपयोग करता हूं, हालांकि याद रखें कि आपका <a> द्रव्यमान खो देगा। यह में एक छोटे से जादू के साथ

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

Answer 4

उपयोग पाठ इंडेंट :)

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> 

सीएसएस:

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

तो तुम पाठ को देखने इंडेंट है लेकिन अभी भी छवि स्थिर है एल क्लिक करने योग्य क्योंकि मैंने ट्विटर लिंक में एक कक्षा डाली है;)

Answer 5

अपने सीएसएस में font-size : 0px; बनाने का प्रयास करें।