نص غير مرئي باستخدام CSS

يمكن أن يكون إخفاء عناصر النص باستخدام CSS مفيدًا لأغراض التصميم المختلفة. أحد السيناريوهات الشائعة هو استبدال النص بصورة كشعار. تتناول هذه المقالة مشكلة محددة: كيفية إزالة النص الأصلي بشكل فعال أثناء عرض الصورة.

حلول لإخفاء النص

هناك طرق متعددة لجعل النص غير مرئي أثناء عرض الصورة. الحفاظ على أبعاد العنصر لوضع الصورة.

الطريقة الأولى: المسافة البادئة للنص

تتضمن إحدى التقنيات دفع النص خارج الشاشة باستخدام مسافة بادئة للنص:

]ح1 { المسافة البادئة للنص: -9999 بكسل؛ /* يرسل النص خارج الشاشة */ صورة الخلفية: url(/the_img.png); /* تظهر الصورة */ الارتفاع: 100 بكسل؛ /* تأكد من ضبط الارتفاع & عرض */ العرض: 600 بكسل؛ المساحة البيضاء: nowrap؛ /* لأنه تم وضع مسافة بادئة للسطر الأول فقط */

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 */
}

الطريقة الثانية: إخفاء النص

هناك حل آخر يتجنب المربع الكبير غير المرئي الذي تم إنشاؤه بواسطة المسافة البادئة السلبية:

h1 { صورة الخلفية: url(/the_img.png); /* تظهر الصورة */ الارتفاع: 100 بكسل؛ /* تأكد من ضبط الارتفاع & عرض */ العرض: 600 بكسل؛ /* إخفاء النص. */ المسافة البادئة للنص: 100%؛ المساحة البيضاء: nowrap؛ الفائض: مخفي؛

h1 {
    background-image: url(/the_img.png);  /* shows image */
    height: 100px;                        /* be sure to set height & width */
    width:  600px;

    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

تحقق كلا الطريقتين النتيجة المرجوة إما عن طريق دفع النص خارج الشاشة أو إخفائه داخل العنصر.