html www كيفية الحصول على صورة خلفية للطباعة باستخدام CSS؟




www w3schools com html5 (8)

للمتصفح Chrome و Safari ، يمكنك إضافة ما يلي في CSS:

@media print
{
    * {-webkit-print-color-adjust:exact;}
}

بالنسبة لمتصفحات الويب الأخرى ، للأسف ، يعود الأمر إلى المستخدم لتحديد خيار طباعة صور الخلفية يدويًا (على سبيل المثال للمستخدمين الذين لديهم IE 9 و 10 و 11 ، يجب عليهم النقر فوق رمز الضبط -> Print -> Page Setup ، وتنشيط الخيار )

أستخدم حزمة ASP Net Sprites لإنشاء CSS Sprites على موقعي.

إنها تعمل ، ولكن الصور التي تنشئها لا تظهر عند الطباعة.

الشفرة التي تم إنشاؤها على مستوى HTML هي:

<a href="/" id="siteLogo"><img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></a>

كيف يمكنني الحصول على صورة الشعار لتظهر عندما يقوم المستخدم بطباعة الصفحة؟

لقد حاولت إضافة هذا في ورقة أنماط print.css الخاصة بي ، ولكنه لم يعمل:

#siteLogo
{
    visibility: visible;
}

تعمل print.css بشكل جيد وهي تقوم بتنسيق الصفحة كما أريدها لعناصر أخرى على الصفحة. مشكلتي الوحيدة هي أنني لا أستطيع عرض صورة شعار الموقع عند طباعتها.


عند محاولة الطباعة المخصصة من خلال إنشاء تنسيق الطباعة مباشرةً باستخدام برنامج جافا النصي وإذا كانت هناك علامة فهناك لن تتم الطباعة لأن المتصفح يرسل طلبًا شديدًا إلى الطابعة دون انتظار تحميل الصورة في ذاكرة التخزين المؤقت. لذا فإن الممارسة الجيدة تضيف صورة تريد طباعتها على صفحة html وتجعلها مرئية كاذبة.


الأمر متروك للمستخدم وإعدادات المتصفح الخاصة به لطباعة أو عدم طباعة صور الخلفية. لمنع نفسك من الاعتماد على ذلك ، ضع الصور مباشرة في HTML مع علامة <img /> فعلية.


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

<!DOCTYPE html>

<html>

<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>

في ما يلي صورة الخلفية التي تمت دعوتها في ملف css الرئيسي المستخدم في المتصفحات.

.bg {
background: url("http://fpoimg.com/250x250") top left no-repeat;
width:250px;
height: 250px;
}

واختراق الطباعة المستخدم من قبل المتصفحات عند بدء المستخدمين لمربع حوار الطباعة. لذلك يمكنك إضافة فئة الطباعة إلى div الخاص بك وجعلها تطبع ، أو إزالتها إذا لزم الأمر.

.bg.print {
display: list-item;
list-style-image: url("http://fpoimg.com/250x250");
list-style-position: inside;
}

ملاحظة: يمكنك أيضًا استخدام القاعدةmedia بدلاً من استيراد الملفات إذا كنت تريد تجنب إجراء طلب HTTP إضافي.

مرجع من: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html


يمكن أن يكون لديك استعلام وسائط خاص للطباعة والاستخدام: قبل المحدد مع سمة "المحتوى".

ضع هذا في استعلام الوسائط وسيقوم بإدراج الصورة عند محاولة الطباعة:

p:before { content: url(images/quote.gif); }

http://www.htmldog.com/reference/cssproperties/content/


<div style="position: relative;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello, world.
    </div>
</div>

هذا يعنى CSS الذي قمت بنشره ، راجع أيضًا موقع الويب هذا: https://defuse.ca/force-print-background.htm


جرب هذا:

@media print {
    body:before {
        content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
        position: absolute;
        z-index: -1;
      }
}

set media = "print"

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

Reference







image