सीएसएस/एससीएसएस/बूटस्ट्रैप :: बूटस्ट्रैप में प्रिंट सेटिंग्स ओवरराइड :: पृष्ठभूमि बदलें: पारदर्शी! रंग

Question

के लिए महत्वपूर्ण है मुझे बूटस्ट्रैप सीएसएस/प्रिंट के साथ कोई समस्या है।

बूटस्ट्रैप सीएसएस में (reset.css) सब कुछ मुद्रण

@media print { 
    * { 
    text-shadow: none !important; 
    color: black !important; 
    background: transparent !important; 
    box-shadow: none !important; 
    } 
} 

लिए मंजूरी दे दी है लेकिन मैं रंग में कई लाइनों मुद्रित करने के लिए की है। मेरे तालिका इस प्रकार है:

<div class="container"> 
    <div id="task-summary"> 
     <div id="process-summary"> 
      <table class="table table-condensed"> 
       <tbody> 
        <tr class="success"> 
         <td> 

मैं अपने कोड में इस embeded है, लेकिन यह काम नहीं करता है:

@media print { 

    #task-summary{ 
    .success{ 
     background-color: #DFF0D7 !important; 
    } 
    } 
} 

मैं पहले से ही है, तो सीएसएस प्रदर्शन का उपयोग करके अपवादित है की कोशिश की है: कोई नहीं .. यह काम करता है (रेखा प्रदर्शित नहीं होती है) और सही जगह पर लगती है।

क्या किसी को पता है कि बूटस्ट्रैप के reset.css को संपादित किए बिना बूटस्ट्रैप सीएसएस कमांड को ओवरराइड करने के लिए मैं कैसे प्रबंधित कर सकता हूं?

Answer 1

@media print { 
    .success { 
     background-color: #DFF0D7 !important; 
    }  
} 

या

@media print { 
    #task-summary .success { 
     background-color: #DFF0D7 !important; 
    } 
} 

या

@media print { 
    #task-summary > #process-summary .success { 
     background-color: #DFF0D7; 
    } 
} 

Answer 2

मैं एक ही समस्या थी। जब आप पृष्ठ को प्रिंट करते हैं तो background-color: ...; विकल्प तालिका पंक्तियों पर काम नहीं करता है। सीएसएस-चयनकर्ता को बदलें:

@media print { 

    #task-summary .success td { 
    background-color: #DFF0D7 !important; 

    /* add this line for better support in chrome */ 
    -webkit-print-color-adjust:exact; 
    } 
} 

सब कुछ इस परिवर्तन के बाद काम करना चाहिए।