تغيير الصورة إلى نص عبر CSS للطباعة؟

Question

لنفترض أن لدي شعار رأس على صفحة ويب وأنا على وشك طباعته.بدلاً من إهدار حبر شخص ما في طباعة كتلة الصورة بأكملها، هل هناك طريقة عبر CSS لاستبدال الصورة بنص بحجم H1؟

Answer 1

هل يمكن وضع عنصر h1 وصورة في نفس المكان في مصدر، ولها display:none صورة CSS لوسائل الإعلام المطبوعة، ولها h1 المقرر أن display:none لوسائل الإعلام الشاشة.

Answer 2

عادةً ما أقوم بإضافة ما يلي إلى ورقة الأنماط الخاصة بي:

.nodisplay
{
    display: none;
}

@media print {
    * {
        background-color: white !important;
        background-image: none !important;
    }
    .noprint
    {
        display: none;
    }
}

ومن ثم تعيين com.noprint فئة إلى العناصر التي لا ينبغي طباعتها:

<div class="noprint">

</div>

وعلى سبيل المثال، يجب أن يعمل شيء مثل ما يلي:

<img src="logo.png" class="noprint" ...>
<h1 class="nodisplay">Text Logo</h1>

Answer 3

وبريان، وعادة على أشياء مثل الشعارات يمكنني استخدام استبدال صورة للرسم على أي حال حتى الشعار نفسه هو حقا في علامة H1. ثم في بلدي ورقة نمط الطباعة. أفعل شيئا من هذا القبيل ...

h1#logo a, h1#home-logo{
    text-indent: 0 !important;
    background-image: none !important;
    font-size: 1.2em !important;
    display: block !important;
    height: 1em !important;
    width: 100% !important;
    text-decoration: none !important;
    color: black !important;
}

والذي يزيل استبدال الصورة ويظهر النص. تأكد بالطبع أن استدعاء هذه الأنماط بشكل منفصل باستخدام media="print".

Answer 4

وإضافة إلى حل آدم: إذا تم إصلاح النص ( "لافتة رئيس كان هناك" وليس "إعلان على كذا وكذا وجود")، يمكنك استخدام <لأ href = "http://www.w3.org/ TR / CSS2 / selector.html # قبل وبعد "يختلط =" نوفولو noreferrer ">: قبل أو: بعد شبه عناصر لإدراج النص بدلا من النص قبل إدراجها في HTML.

وأنا يجعل HTML أخف وزنا إذا كنت تقوم باستبدال العديد من الصور مع النص نفسه.

وأود أن أقول أن لم يعجبني هذا ميزة CSS، ولكن من هناك إذا كنت ترغب في استخدامه.