Clever Geek Handbook

Change text color of text when printing

I have a div with white text color.

enter image description here

Using css media queries.

@media print {
     .myid_print_duo_name
     {
         z-index: 2;
         position: absolute;
         left: 0px;
         top: 330px;    
         width: 303px;
         height: 28px;
         line-height: 28px;     
         text-align: center;    
         color: white !important; 
         font-weight: bold;
         font-size: 20px;
         font-family: "Times New Roman";     
     }

 }

In my print preview, my text looks a little darker.

enter image description here

I thought it was ok, but then the printed result is really the same in my preview. Why is it getting a little darker?

+3


source to share


3 answers


MDN Docs : Adding this rule will overwrite the custom printer property settings.



@media print {
  .myid_print_duo_name { /* Replace class_name with * to target all elements */
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact; /* Non-Webkit Browsers */
  }
}
+5


source


Try this css, it might help you.



@media print {
     .myid_print_duo_name{ -webkit-print-color-adjust: exact; color:#fff !important;}
}
+1


source


Some browsers have a property print-color-adjust

that can darken some colors and lighten others. Try adding these to your CSS:

-webkit-print-color-adjust: exact;
        print-color-adjust: exact;

Taken from Smashing site: http://www.smashingmagazine.com/2013/03/08/tips-and-tricks-for-print-style-sheets/

+1


source






More articles:


All Articles