पृष्ठभूमि रंग के साथ सीएसएस @मीडिया प्रिंट मुद्दों;

Question

मैं यहाँ इस कंपनी में नया हूँ और हमारे पास एक उत्पाद है जो मीलों सीएसएस का उपयोग करता है। मैं अपने अनुप्रयोग के लिए एक मुद्रण योग्य स्टाइलशीट करने का प्रयास कर रहा हूँ, लेकिन मैं के साथ मुद्दों कर रहा हूँ background-colorमें @media print।

    @media print {
      #header{display:none;}
      #adwrapper{display:none;}
      td {
        border-bottom: solid; 
        border-right: solid; 
        background-color: #c0c0c0;
      }
    }

बाकी सब कुछ काम करता है, मैं सीमाओं को संशोधित कर सकता हूं और इस तरह background-colorप्रिंट में नहीं आएगा। अब मुझे समझ में आया है कि शायद आप अधिक विवरण के बिना मेरे प्रश्न का उत्तर देने में सक्षम नहीं होंगे। मैं बस उत्सुक था अगर किसी को यह मुद्दा था, या कुछ इसी तरह, पहले।

Comments

खैर, यह W3C CSS-Validator ( jư.w3.org/css -validator ) को पास करता है। यह अजीब है

— GöTô

यह अब कोई समस्या नहीं होनी चाहिए। मैं इस मुद्दे पर आया क्योंकि मेरे पास बूटस्ट्रैप पेज था और बूटस्ट्रैप में एक @media printक्वेरी होती है जो पृष्ठभूमि के रंगों को तालिकाओं (जैसे धारियों) से हटाती है।

— मार्टिन थोमा

@MartinThoma आपने समस्या को कैसे ठीक किया? क्या आपने सीएसएस को टेम्प्लेट से हटा दिया है?

— एडुएलोपेज़

Answer 1

यदि किसी उपयोगकर्ता के पास "प्रिंट पृष्ठभूमि के रंग और चित्र" हैं, तो उनकी प्रिंट सेटिंग में बंद हो जाती हैं, कोई भी सीएसएस उसे ओवरराइड नहीं करेगा, इसलिए उसके लिए हमेशा खाते रहें। यह एक डिफ़ॉल्ट सेटिंग है ।

एक बार जब यह सेट हो जाता है तो यह पृष्ठभूमि के रंगों और छवियों को प्रिंट करेगा, आपके पास वहां क्या काम होगा।

यह विभिन्न स्थानों पर पाया जाता है। IE9beta में यह पेपर विकल्पों के तहत प्रिंट-> पृष्ठ विकल्पों में पाया जाता है

फ़ायर्फ़ॉक्स में यह पृष्ठ सेटअप में है -> [प्रारूप और विकल्प] विकल्प के तहत टैब।

Comments

महान, आपने अभी-अभी इस CSS पर मेरे दिमाग को रैक करने के कुछ घंटों को बचाया है।

— वेस्टन वाटसन

क्रोम और सफारी के साथ आप सीएसएस शैली जोड़ सकते हैं "-webkit- प्रिंट-रंग-समायोजन: सटीक;" पृष्ठभूमि रंग और / या छवि को प्रिंट करने के लिए मजबूर करने के लिए तत्व

— मार्को बेट्टोलो

@MarcoBettiolo नवीनतम वेबकिट बिल्ड पर काम नहीं करता है, लेकिन महत्वपूर्ण हालांकि करता है

— Hedde van der Heide

नियम में जोड़ना महत्वपूर्ण मेरे लिए भी हल हो गया।

— थियागो डुटर्टे

इस पर विस्तार करने के लिए, मैंने रंग-समायोजन जोड़ा: सटीक; एफएफ के लिए काम करने के लिए। तो मेरा पूरा कोड है*{ color-adjust: exact; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

— BitBug

Answer 2

Chrome में बैकग्राउंड प्रिंटिंग सक्षम करने के लिए:

body {
  -webkit-print-color-adjust: exact !important;
}

Comments

ऐसा लगता है कि वैकल्पिक पंक्ति के रंगों के साथ एक तालिका को प्रिंट करने के साथ मेरी समस्या हल हो गई है।

— विक्टर जे। गार्सिया

सुनिश्चित करें कि आप अपनी छवि पथ के लिए सही आवरण का उपयोग करते हैं क्योंकि Chrome का प्रिंट संवाद पहले प्रयास में छवियों को लोड नहीं करता है। यह केवल इस घटना में होता है कि आपकी पृष्ठभूमि-छवि संपत्ति का URL भौतिक फ़ोल्डर के नाम के आवरण से मेल नहीं खाता है। (संस्करण 48.0.2564.109 मीटर में रिपोर्ट किया गया है)

— MPaul

फ़ायरफ़ॉक्स और IE में वैकल्पिक क्या है

— शान खान

भविष्य के समय के यात्रियों के लिए एक नोट: आप color-adjustइसके बजाय उपयोग करना चाह सकते हैं ।

— Константин Ван

@ КонстантинВан यह अप्रैल 2019 तक क्रोम में समर्थित नहीं है। यह फ़ायरफ़ॉक्स प्रलेखन है।

— थॉमस

Answer 3

समझ गया:

सीएसएस:

box-shadow: inset 0 0 0 1000px gold;

सभी बक्से के लिए काम करता है - तालिका कोशिकाओं सहित !!!

• (यदि पीडीएफ-प्रिंटर आउटपुट फाइल पर विश्वास किया जाए ..?)
• केवल क्रोम + फ़ायरफ़ॉक्स में उबंटू पर परीक्षण किया ...

Comments

आप IE8 और IE9 समर्थन को जोड़ सकते हैं -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fffada', endColorstr='#fffada')"; /* IE8 */ यदि आप चाहते हैं कि आपकी स्प्राइट छवियां दिखाई दें, तो img / क्लिप तकनीक का उपयोग करें css-tricks.com/css-sprites-with-inline-images , जो आपको IE9 और FF में चित्र देगा ( हालांकि IE8 नहीं)

— एमिक

सामान्य ब्राउज़र में बहुत अच्छा काम करता है, लेकिन IE में नहीं, यहाँ तक कि @evami के सुझाव से भी।

— woz

@ मैं इसे IE8 / 9 के साथ एक परियोजना में काम कर रहा हूँ। ग्रेडिएंट (बॉक्स-शैडो की तरह) एक अतिरिक्त पृष्ठभूमि तत्व जोड़ता है जिसे जबरन ब्राउज़र रीसेट द्वारा समाप्त नहीं किया जाता है। क्या आप अपना सीएसएस साझा करना चाहेंगे?

— एमिक

यह नवीनतम क्रोम (60) के साथ काम नहीं करता है।

— swervo

क्रोम में यह मेरे लिए विफल है। मैं 69 का उपयोग कर रहा हूं। इससे पता चलता है कि यह 60 से कम से कम टूट गया है (@ swervo की टिप्पणी के अनुसार)।

— आइकनोकॉस्ट

Answer 4

यह कोशिश करो, यह मेरे लिए Google Chrome पर काम करता है:

<style media="print" type="text/css">
    .page {
        background-color: white !important;
    }
</style>

Answer 5

-webkit-print-color-adjust: exact; अकेलेis Not enough आपको उपयोग करना होगा!important विशेषता के साथ करना होगा

इस क्रोम पर पूर्वावलोकन प्रिंट कर रहा है के बाद मैं जोड़ा !importantप्रत्येक के लिए background-colorऔर colorप्रत्येक टैग में attrubute

और यह जोड़ने से पहले क्रोम पर मुद्रण पूर्वावलोकन है!important

अब, यह जानने के लिए कि inject !importantडिव की शैली कैसे बनाई जाती है, इस उत्तर को देखें कि मैं "महत्वपूर्ण" नियम के साथ शैली को इंजेक्ट करने में असमर्थ हूँ

Comments

शायद यह इसलिए है क्योंकि आपके पास पहले से ही एक @ छाप स्टाइलशीट है जो पृष्ठभूमि के रंग को रीसेट करता है।

— निकोलो एम।

हे भगवान! यह काम कर रहा है लेकिन यह कैसे काम कर रहा है? क्या आप समझा सकते हैं।

— rahim.nagori

यही एकमात्र उपाय है जो अब तक मेरे लिए काम कर रहा है। <div style = "- webkit- प्रिंट-रंग-समायोजन: सटीक-महत्वपूर्ण; पृष्ठभूमि-रंग: लाल! महत्वपूर्ण;"> ... </ div>

— थॉमस

Answer 6

दो समाधान जो काम करते हैं (आधुनिक क्रोम पर कम से कम - परे परीक्षण नहीं किया गया है):

1. नियमित सीएसएस घोषणा कार्यों में महत्वपूर्ण अधिकार (@ मीडिया प्रिंट में भी नहीं)
2. Svg का प्रयोग करें

Comments

जब तक "प्रिंट बैकग्राउंड कलर्स एंड इमेजेज" सक्षम है, तब तक हर आधुनिक ब्राउज़र में समस्या हल हो जाती है।

— क्रिस हाइन्स

महत्वपूर्ण भी उपयोगकर्ता के हस्तक्षेप के बिना काम करता है अगर आप इसे शरीर के साथ एक साथ उपयोग करते हैं -webkit- प्रिंट-रंग-समायोजन: सटीक; } (ऊपर टिप्पणी के अनुसार)

— yar1

मैंने पाया है कि अगर मैं उपयोग करता हूं color-adjustया वेबकिट संस्करण का उपयोग करता हूं तो मुझे महत्वपूर्ण नियम की आवश्यकता नहीं है।

— कासापो

Answer 7

यदि आप "प्रिंटर फ्रेंडली" पेज बनाना चाहते हैं, तो मैं आपके @मीडिया प्रिंट सीएसएस में "महत्वपूर्ण" जोड़ने की सलाह देता हूं। यह अधिकांश ब्राउज़रों को आपकी पृष्ठभूमि छवियों, रंगों आदि को प्रिंट करने के लिए प्रोत्साहित करता है।

उदाहरण:

background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;

Answer 8

अन्य पोस्ट में उल्लिखित प्रिंट बॉर्डर विकल्प को सक्रिय किए बिना एक और चाल है । के बाद से सीमाओं कर रहे हैं मुद्रित आप इस हैक के साथ ठोस पृष्ठभूमि रंग अनुकरण कर सकते हैं:

.your-background:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  border-bottom: 1000px solid #eee; /* Make it fit your needs */
}

अपने तत्व में वर्ग जोड़कर इसे सक्रिय करें:

<table>
  <tr>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
    <td class="your-background">&nbsp;</td>
  </tr>
</table>

हालाँकि इसके लिए कुछ अतिरिक्त कोड और पृष्ठभूमि-रंगों को स्पष्ट करने के लिए कुछ अतिरिक्त देखभाल की आवश्यकता होती है, फिर भी यह एकमात्र समाधान है जो मुझे ज्ञात है।

सूचना इस हैक के अलावा अन्य तत्वों पर काम नहीं करेगा display: block;या display: table-cell;उदाहरण के लिए, तो <table class="your-background">और<tr class="your-background"> काम नहीं करेगा।

हम सभी ब्राउज़रों में पृष्ठभूमि रंग प्राप्त करने के लिए इसका उपयोग करते हैं (फिर भी, IE9 + आवश्यक)।

Comments

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

— ब्रैड ज़कर

Answer 9

क्रोम के लिए, मैंने कुछ इस तरह का उपयोग किया है और यह मेरे लिए काम करता है।

बॉडी टैग के भीतर,

<body style="-webkit-print-color-adjust: exact;"> </body>

या किसी विशेष तत्व के लिए, मान लें कि आपके पास टेबल है और आप एक td यानी सेल भरना चाहते हैं,

<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>

Answer 10

!importantआमतौर पर उपयोग के बावजूद , यह अपमानजनक कोड है bootstrap.cssजिसमें तालिका पंक्तियों को मुद्रित होने से रोकता है background-color।

.table td,
.table th {
    background-color: #fff !important;
}

मान लेते हैं कि आप निम्न HTML शैली के लिए प्रयास कर रहे हैं:

<table class="table">
    <tr class="highlighted">
      <td>Name</td>
      <td>School</td>
      <td>Height</td>
      <td>Weight</td>
    </tr>
</table>

इस CSS को ओवरराइड करने के लिए, अपनी स्टाइलशीट में निम्नलिखित (अधिक विशिष्ट) नियम रखें:

@media print {
    table tr.highlighted > td {
        background-color: rgba(247, 202, 24, 0.3) !important;
    }
}

यह काम करता है क्योंकि नियम बूटस्ट्रैप डिफ़ॉल्ट की तुलना में अधिक विशिष्ट है।

Comments

घंटों खोज के बाद, मुझे यह उत्तर मिला। मैंने बूटस्ट्रैप और एससीएएम से लाइनों को समाप्त कर दिया! प्रिंट करने योग्य पृष्ठभूमि में रंग!

— पराक्रमी फिरंगी

धन्यवाद! अंत में, यह वह उत्तर है जो मुझे मिला और चल रहा था, लेकिन मुझे जोड़ने की जरूरत थी: शरीर {-बचकी-प्रिंट-रंग-समायोजन: सटीक! महत्वपूर्ण! }

— ओशन एयरड्रॉप

Answer 11

यह समस्या मिली, क्योंकि मुझे Google Apps स्क्रिप्ट में HTML आउटपुट से एक पीडीएफ उत्पन्न करने की कोशिश करते समय एक समान समस्या थी जहां पृष्ठभूमि-रंग भी "मुद्रित" नहीं हैं।

-webkit-print-color-adjust:exact;और !importantनिश्चित रूप से समाधान काम नहीं किया था, लेकिन box-shadow: inset 0 0 0 1000px gold;था ... महान हैक, आपको बहुत बहुत धन्यवाद :)

Answer 12

सोचा था कि मैं हाल ही में प्रिंट सीएसएस अनुभव से एक हालिया और 2015 प्रासंगिक सहायता जोड़ूंगा।

प्रिंट संवाद बॉक्स सेटिंग्स की परवाह किए बिना पृष्ठभूमि और रंगों को मुद्रित करने में सक्षम था।

ऐसा करने के लिए, मुझे महत्वपूर्ण और -webkit- प्रिंट-रंग-समायोजन का एक संयोजन का उपयोग करना पड़ा : सटीक और महत्वपूर्ण ठीक से प्रिंट करने के लिए पृष्ठभूमि और रंगों को प्राप्त करने के लिए ।

इसके अलावा, जब रंगों की घोषणा करते हुए, मैंने पाया कि सबसे जिद्दी क्षेत्रों को सीधे आपके लक्ष्य के लिए एक परिभाषा की आवश्यकता थी। उदाहरण के लिए:

<div class="foo">
 <p class="red">Some text</p>
</div>

और आपका CSS:

.red {color:red !important}
.foo {color:red !important} /* <-- This won't always paint the p */

Answer 13

परीक्षण और कार्य करना2016/10 तक क्रोम, फ़ायरफ़ॉक्स, ओपेरा और एज पर । किसी भी ब्राउज़र पर काम करना चाहिए और हमेशा अपेक्षित रूप से देखना चाहिए।

ठीक है, मैंने पृष्ठभूमि के रंगों को प्रिंट करने के लिए थोड़ा क्रॉस-ब्राउज़र प्रयोग किया। बस कॉपी, पेस्ट और आनंद लें!

यहाँ यह बूटस्ट्रैप के लिए एक पूर्ण मुद्रण योग्य HTML पृष्ठ है:

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">

    /* Both z-index are resolving recursive element containment */
    [background-color] {
        z-index: 0;
        position: relative;
        -webkit-print-color-adjust: exact !important;
    }

    [background-color] canvas {
        display: block;
        position:absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

</style>
</head>

<!-- CONTENT -->
<body>

    <!-- PRINT ROW BLOCK -->
    <div class="container">

    <div class="row">
        <div class="col-xs-6">
            <div background-color="#A400C1">
                <h4>
                Hey... this works !
                </h4>
                <div background-color="#0068C1">
                    <p>
                    Ohh... this works recursive too !!
                    <div background-color="green" style="width: 80px; height: 60px">
                        Any size !!
                    </div>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div background-color="#FFCB83" style="height: 200px">
                Some content...
            </div>
        </div>

    </div>


<script>
    var containers = document.querySelectorAll("[background-color]");

    for (i = 0; i < containers.length; i++)
    {
        // Element
        var container = containers[i];
        container.insertAdjacentHTML('beforeend', '<canvas id="canvas-' + i + '"></canvas>');

        // Color
        var color = container.getAttribute("background-color");
        container.style.backgroundColor = color;

        // Inner Canvas
        var canvas = document.getElementById("canvas-" + i);
        canvas.width = container.offsetWidth;
        canvas.height = container.offsetHeight;
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = color;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    window.print();
</script>


</body>

</html>

Answer 14

सबसे अच्छा "समाधान" मैंने पाया है कि एक प्रमुख "प्रिंट" बटन या लिंक प्रदान करना है जो एक छोटे से संवाद बॉक्स को पॉप अप, संक्षेप में और संक्षिप्त रूप से बताता है कि उन्हें पृष्ठभूमि को सक्षम करने के लिए प्रिंटर सेटिंग्स (एबीसी 123 बुलेट बिंदु निर्देश के साथ) समायोजित करने की आवश्यकता है और छवि मुद्रण। यह मेरे लिए बहुत सफल रहा है।

Answer 15

कुछ मामलों में (किसी भी सामग्री के बिना ब्लॉक, लेकिन पृष्ठभूमि के साथ) यह प्रत्येक ब्लॉक के लिए व्यक्तिगत रूप से सीमाओं का उपयोग करके ओवरराइड किया जा सकता है।

उदाहरण के लिए:

.colored {
  background: #000;
  border: 1px solid #ccc;
  width: 8px;
  height: 8px;
}

@media print {
  .colored div {
    border: 4px solid #000;
    width: 0;
    height: 0;
  }
}

Answer 16

आप टैग canvasऔर "ड्रा" बैकग्राउंड का उपयोग कर सकते हैं , जो IE9, गेको और वेबकिट पर काम करते हैं।

Answer 17

यदि आपको पृष्ठभूमि रंग के बजाय एक छवि का उपयोग करने में कोई आपत्ति नहीं है (या संभवतः आपके पृष्ठभूमि रंग के साथ एक छवि) तो नीचे दिए गए समाधान ने मेरे लिए फ़ायरफ़ॉक्स, क्रोम और यहां तक ​​कि IE में बिना किसी अधिक सवारी के काम किया है। छवि को पृष्ठ पर कहीं सेट करें और इसे तब तक छिपाएं जब तक उपयोगकर्ता प्रिंट न कर दे।

पृष्ठ पर HTML पृष्ठभूमि छवि के साथ

<img src="someImage.png" class="background-print-img">

सीएसएस

.background-print-img{
    display: none;
}

@media print{
    .background-print-img{
        background:red;
        display: block;
        width:100%;
        height:100%;
        position:absolute;
        left:0;
        top:0;
        z-index:-10;
    }

}

Comments

मैंने आपका दृष्टिकोण लिया और IE11 पर काम करने की कोशिश की, लेकिन दुख की बात है कि यह काम नहीं किया। यह तब तक था जब तक कि मैं !importantअपनी कक्षा में प्रत्येक विशेषता पर एक मूल्य नहीं रखता जो इसे काम करने के लिए मिला।

— साल अल्टुरिगी

Answer 18

करो नहीं सेटbackground-colorप्रिंट स्टाइलशीट अंदर । बस सामान्य सीएसएस फ़ाइल में विशेषता सेट करें और यह ठीक काम करता है :)

इस उदाहरण की जाँच करें: हेडर और फुटर के साथ अंतिम प्रिंट HTML टेम्पलेट

डेमो: हैडर और फुटर डेमो के साथ अंतिम प्रिंट HTML टेम्पलेट

Answer 19

tr.group-title {
  padding-top: .5rem;
  border-top: 2rem solid lightgray;
}

tr.group-title > td h5 {
  margin-top: -1.9rem;
}

          <tbody>
            <tr class="group-title">
              <td colspan="6">
                <h5 align="center">{{ group.title }}</h5>
              </td>
            </tr>

क्रोम और एज में काम करता है