मैं ब्राउज़रों को CSS में पृष्ठभूमि छवियों को प्रिंट करने के लिए कैसे मजबूर कर सकता हूं?

Question

यह प्रश्न पहले भी पूछा गया था लेकिन मेरे मामले में समाधान लागू नहीं है। मैं यह सुनिश्चित करना चाहता हूं कि कुछ पृष्ठभूमि छवियां मुद्रित हों क्योंकि वे पृष्ठ से अभिन्न हैं। (वे सीधे पृष्ठ में चित्र नहीं हैं क्योंकि उनमें से कई सीएसएस स्प्राइट के रूप में उपयोग किए जा रहे हैं।)

उसी प्रश्न पर एक और समाधान का उपयोग करने का सुझाव देता है list-style-image, जो केवल तभी काम करता है जब आपके पास हर आइकन के लिए एक अलग छवि हो, कोई सीएसएस संभव नहीं हो।

आइकनों के साथ एक अलग पेज बनाने के अलावा, क्या कोई और उपाय है?

Answer 1

किसी ब्राउज़र की प्रिंटिंग विधियों पर आपका नियंत्रण बहुत कम है। अधिकांश पर आप SUGGEST कर सकते हैं, लेकिन यदि ब्राउज़र की प्रिंट सेटिंग्स में "बैकग्राउंड इमेज नहीं प्रिंट होते हैं", तो आपके पेज को दोबारा लिखने के बिना आप ऐसा कुछ भी नहीं कर सकते हैं जो बैकग्राउंड इमेज को फ्लोटिंग "फोरग्राउंड" इमेज में बदल दे जो अन्य कंटेंट के पीछे हो।

Answer 2

क्रोम और सफारी के साथ आप -webkit-print-color-adjust: exact;बैकग्राउंड कलर और / या इमेज को प्रिंट करने के लिए सीएसएस स्टाइल को एलिमेंट में जोड़ सकते हैं

Comments

यह कमाल का है। Phantomjs उपयोगकर्ताओं / वेबकिट के लिए जीवन को बहुत आसान बनाता है

— जेसन

@MuneemHabib यह IE में काम नहीं करता है, वास्तव में, एकमात्र समर्थित ब्राउज़र Chrome है: developer.mozilla.org/en-US/docs/Web/CSS/…

— Marco Bettiolo

कि क्रोम के लिए चाल चली ... सौभाग्य से इस मामले में मैं केवल wekkit का समर्थन करने की जरूरत है ...

— डेवी

@DisgruntledGoat को इसे सही उत्तर होने के लिए अपडेट करना चाहिए क्योंकि इससे मेरी समस्या का जल्द हल हो गया (काम पर मेरा प्रोजेक्ट केवल क्रोम पर केंद्रित है)। यह स्पष्ट रूप से सभी ब्राउज़रों के लिए काम नहीं करता है, लेकिन इसे पता होना चाहिए, सामने की ओर, भले ही।

— ब्रेटाटॉच

@ Brett84c: मैं इससे सहमत नहीं हूं क्योंकि यह एक ब्राउज़र केवल समाधान है।

— कुकेल्टजे

Answer 3

डिफ़ॉल्ट रूप से, ब्राउज़र के पास पृष्ठभूमि-रंग और छवियों को बंद करने का विकल्प होता है। इसे दरकिनार करने के लिए आप CSS में कुछ लाइनें जोड़ सकते हैं। बस जोड़ दो:

* {
    -webkit-print-color-adjust: exact !important;   /* Chrome, Safari */
    color-adjust: exact !important;                 /*Firefox*/
}

Comments

हां ठीक काम करता है, लेकिन मोज़िला निशान गैर के रूप में यह सुविधा गैर-मानक है और एक मानक ट्रैक पर नहीं है। वेब का सामना करने वाले उत्पादन साइटों पर इसका उपयोग न करें: यह प्रत्येक उपयोगकर्ता के लिए काम नहीं करेगा। कार्यान्वयन के बीच बड़ी असंगतताएं भी हो सकती हैं और भविष्य में व्यवहार बदल सकता है।

— Qh0stM4N

क्यों !importantजरूरी है?

मेरे लिए काम किया! धन्यवाद।

— निक वुडहम्स

color-adjustदुर्भाग्य से FireFox द्वारा ठीक से समर्थित नहीं है। यह केवल पृष्ठभूमि पर लागू होता है, colorसीएसएस संपत्ति पर नहीं। बिना किसी गतिविधि या वोट के, बग के रूप में रिपोर्ट किया जाता है । यदि फ़ॉन्ट रंग संरक्षित नहीं है, तो पृष्ठभूमि को रखना काफी बेकार है, क्योंकि यह अपठनीय है।

— Frédéric

यह एक अच्छा उपाय है। बस ध्यान रखें कि यह IE11 के साथ काम नहीं करता है (मुझे पता है!)।

— राफेल एस। फिजलकोव्स्की

Answer 4

मुझे सीएसएस के साथ पृष्ठभूमि छवि को प्रिंट करने का एक तरीका मिला। यह इस बात पर निर्भर है कि आपकी पृष्ठभूमि कैसी है, लेकिन यह मेरे आवेदन के लिए काम करता है।

अनिवार्य रूप से, आप जोड़ते हैं @media print अपनी स्टाइलशीट के अंत में हैं और शरीर की पृष्ठभूमि को थोड़ा बदलते हैं।

उदाहरण, यदि आपका वर्तमान सीएसएस इस तरह दिखता है:

body {
background:url(images/mybg.png) no-repeat;
}

अपनी स्टाइलशीट के अंत में, आप जोड़ें:

@media print {
body {
   content:url(images/mybg.png);
  }
}

यह छवि को "अग्रभूमि" छवि के रूप में शरीर में जोड़ता है, इस प्रकार इसे प्रिंट करने योग्य बनाता है। z-indexउचित बनाने के लिए आपको कुछ अतिरिक्त CSS जोड़ने की आवश्यकता हो सकती है । लेकिन फिर, इसके लिए कि आपका पृष्ठ कैसे रखा गया है।

यह मेरे लिए तब काम आया जब मुझे प्रिंट व्यू में दिखाने के लिए हेडर इमेज नहीं मिली।

Comments

मुझे जो करने की ज़रूरत थी, उसके लिए यह एक भयानक समाधान था, जो कि एक इनलाइन <img>(आरडब्ल्यूडी के लिए) के लिए एक अलग से स्विच था @media print। वेब छवि एक अंधेरे पृष्ठभूमि पर थी, इसलिए उस छवि को मुद्रित करना श्वेत पत्र पर काम नहीं करता था, और मैं उपयोगकर्ताओं को हेडर पर एक अंधेरे पृष्ठभूमि को प्रिंट करने के लिए मजबूर नहीं करना चाहता था। उत्तम!

— JHogue

@JHogue - धन्यवाद! खुशी है कि यह आपकी मदद की।

— ckpepper02

हालांकि यह "सही" उत्तर नहीं है। यह स्वीकृत उत्तर की तुलना में अधिक उपयोगी है।

— एक्सनोलॉजी

नीचे दिए गए उत्तर stackoverflow.com/a/15208258/915865 को चिन्हित किया जाना चाहिए क्योंकि इसमें बेहतर स्पष्टीकरण है, imho

— कैट लिम Ruiz

फायरफॉक्स में यह केवल तभी काम करता है जब आप अंदर सामग्री का उपयोग करते हैं: @ हंज़ के उत्तर की तरह

— 13-13

Answer 5

नीचे दिया गया कोड मेरे लिए (कम से कम क्रोम के लिए) अच्छा काम करता है।

मैंने कुछ मार्जिन और पेज ओरिएंटेशन कंट्रोल भी जोड़े। (पोर्ट्रेट, लैंडस्केप)

<style type="text/css" media="print">
@media print {
  body {-webkit-print-color-adjust: exact;}
}
@page {
    size:A4 landscape;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin: 0;
    -webkit-print-color-adjust: exact;
}
</style>

Answer 6

महत्वपूर्ण विशेषता का उपयोग करना सुनिश्चित करें। यह नाटकीय रूप से संभावना को बढ़ाता है जब आपकी शैलियों को मुद्रित किया जाता है।

#example1 {
    background:url(image.png) no-repeat !important;
}

#example2 {
    background-color: #123456 !important;
}

Comments

मैंने इस पद्धति का उपयोग करके अपनी कंपनी के लिए कुछ सरल "प्रिंटर के अनुकूल" रिपोर्ट बनाई। यह ओएस एक्स क्रोम / सफारी और विंडोज 8 क्रोम / IE पर काम करता है (किसी भी अन्य प्लेटफार्मों की कोशिश नहीं की है)।

— नट-एन-बीयर

ऐसा प्रतीत होता है कि मैक पर क्रोम, फ़ायरफ़ॉक्स और सफारी पर कोई प्रभाव नहीं है।

— इंट्रक्रेटर

यह सिर्फ वही है जो मुझे उस विशेष तत्व के हर उपयोग के लिए विशेषता को लागू करने की आवश्यकता थी और मुझे उचित रूप से डॉक्टर को प्रिंट करने दें। धन्यवाद!

— जॉनी

Answer 7

जैसे @ ckpepper02 ने कहा, शरीर की सामग्री: यूआरएल विकल्प अच्छी तरह से काम करता है। हालाँकि मैंने पाया कि यदि आप इसे थोड़ा संशोधित करते हैं, तो आप इसका उपयोग कर सकते हैं: एक हेडर इमेज को जोड़ने के लिए इसका उपयोग करके: से पहले छद्म तत्व निम्नानुसार है।

@media print {
  body:before { content: url(img/printlogo.png);}
}

यह पृष्ठ के शीर्ष पर छवि को खिसकाएगा, और मेरे सीमित परीक्षण से, यह क्रोम और IE9 में काम करता है

-hanz

Answer 8

प्यूसीडो-तत्वों का उपयोग करें। जबकि कई ब्राउज़र पृष्ठभूमि छवियों को अनदेखा करेंगे, एक छवि के लिए सेट की गई सामग्री के साथ psuedo- तत्व तकनीकी रूप से पृष्ठभूमि चित्र नहीं हैं। आप तब पृष्ठभूमि छवि को मोटे तौर पर रख सकते हैं, जहां छवि को जाना चाहिए था (हालांकि यह मूल छवि की तरह आसान या सटीक नहीं है)।

एक दोष यह है कि क्रोम में काम करने के लिए, आपको अपने प्रिंट मीडिया क्वेरी के बाहर इस व्यवहार को निर्दिष्ट करना होगा, और फिर प्रिंट मीडिया क्वेरी ब्लॉक में इसे दिखाई देना चाहिए। तो, कुछ इस तरह ...

.image:before{
        visibility:hidden;
        position:absolute;
        content: url("your/image/path");
    }   

@media print {
.image{
   position:relative;
    }
    .image:before{
       visibility:visible;
       top:etc...
    }       
}

दोष यह है कि छवि को अक्सर सामान्य पेज लोड पर डाउनलोड किया जाएगा, अनावश्यक बल्क को जोड़ा जाएगा। आप केवल उसी छवि / पथ का उपयोग करके इससे बच सकते हैं जिसका उपयोग आपने पहले से ही मूल, दृश्यमान छवि के लिए किया था।

Answer 9

जब आप जोड़ते हैं तो यह Google क्रोम में काम कर रहा होता है। बैकग्राउंड इमेज के लिए महत्वपूर्ण विशेषता यह सुनिश्चित करती है कि आप पहले विशेषता जोड़ें और फिर से प्रयास करें, आप इसे इस तरह से कर सकते हैं

    .inputbg {
background: url('inputbg.png') !important;  

}

Comments

उल्लेख करने के लिए अच्छी बात है, मेरे मुद्दे को एक साथ -webkit- प्रिंट-रंग-समायोजन के साथ हल किया: सटीक-महत्वपूर्ण!

— 20

Answer 10

आप तय रंगों के लिए सीमाओं का उपयोग कर सकते हैं।

 borderTop: solid 15px black;

और ढाल पृष्ठभूमि के लिए आप उपयोग कर सकते हैं:

    box-sizing: border-box;
    border-style: solid;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-image: linear-gradient(to right, red, blue) 100%;
    border-image-slice: 1;
    border-width: 18px;

Answer 11

https://gist.github.com/danomanion/6175687 एक सुंदर समाधान का प्रस्ताव देता है, जिसमें पृष्ठभूमि छवि के स्थान पर एक कस्टम बुलेट का उपयोग किया जाता है:

   a.logo {
     display: list-item;
     list-style-image: url("../images/desired-background.png");
     list-style-position: inside;
   }

इसके भीतर एक करके

@media print {
}

ब्लॉक, मैं स्क्रीन पर एक सफ़ेद-पर-पारदर्शी लोगो को बदलने में सक्षम हूँ, जिसे पृष्ठभूमि-छवि के रूप में प्रस्तुत किया गया है, प्रिंट के लिए एक काले-पारदर्शी लोगो के साथ।

Comments

यह एक प्यारा फिक्स है, लेकिन यह वास्तव में काम नहीं करता है अगर पृष्ठभूमि छवि कंटेनर की तुलना में बहुत बड़ी है। (यह मेरी युक्त div बाहर फैला है)

— Jabbamonkey

Answer 12

आप कुछ ऐसे कर सकते हैं:

<style>
    @page {
        size: 21cm 29.7cm;
        size: landscape
        /*margin: 30mm 45mm 30mm 45mm;*/

    }
    .whater{
        opacity: 0.05;
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 9999;
    }
</style>

शरीर टैग में:

<img src="YOUR IMAGE URL" class="whater"/>