सीएसएस का उपयोग करके अदृश्य पाठ

सीएसएस का उपयोग करके पाठ तत्वों को छिपाना विभिन्न डिज़ाइन उद्देश्यों के लिए उपयोगी हो सकता है। एक सामान्य परिदृश्य टेक्स्ट को लोगो के रूप में छवि से बदलना है। यह आलेख एक विशिष्ट समस्या का समाधान करता है: छवि प्रदर्शित करते समय मूल पाठ को प्रभावी ढंग से कैसे हटाया जाए।

पाठ छिपाने के लिए समाधान

पाठ को अदृश्य बनाने के लिए कई दृष्टिकोण हैं छवि प्लेसमेंट के लिए तत्व के आयामों को संरक्षित करना। ]एच1 { टेक्स्ट-इंडेंट: -9999px; /* टेक्स्ट को ऑफ-स्क्रीन भेजता है */ पृष्ठभूमि-छवि: url(/the_img.png); /* छवि दिखाता है */ ऊंचाई: 100px; /* ऊंचाई निर्धारित करना सुनिश्चित करें & amp; चौड़ाई */ चौड़ाई: 600px; व्हाइट-स्पेस: अब्रैप; /* क्योंकि केवल पहली पंक्ति ही इंडेंट की गई है */ }

विधि 2: टेक्स्ट छिपाना

एक अन्य समाधान नकारात्मक इंडेंटेशन द्वारा बनाए गए बड़े अदृश्य बॉक्स से बचाता है:

h1 {
    text-indent: -9999px;                 /* sends the text off-screen */
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;
    white-space: nowrap;            /* because only the first line is indented */
}

दोनों विधियां या तो टेक्स्ट को ऑफ-स्क्रीन धकेल कर या तत्व के भीतर छिपाकर वांछित परिणाम प्राप्त करती हैं।