Grey Font Color Printing

前端未结

关注

 9  921

心在旅途

Is there any way to ensure that my grey font colors do not turn black?

Firefox and Chrome seem to do this in order to prevent white text on black background from tur

相关标签:

9条回答

滥情空心

2020-12-14 01:00

Give importance to color:

.bgcol{
background-color:skyblue !important;
}
 .subject_content,h2,p{
 color:rgba(255, 255, 255) !important;
    margin: 25px auto;

}
<body class="bgcol">
       <div class="subject_content">
      <h2 class='text-center'>fhddfhnt area</h2>
      <p>sdgdfghdfhdfh.</p>
     </div>

0 讨论(0)

刺人心

2020-12-14 01:02
Nothing above was working for me so I finally figured it out.

Always give colors to direct elements. Ex. Suppose your html is
```
<div class='div'><br/>
      < h1>Text< /h1><br/>
</div>
```
and your CSS
```
.div { 
     color: #ccc; 
    } 
```
This was my case. In this case no matter what you do the color won't show.

You have to do
```
.div h1 { 
 color: #ccc; 
}

@media print { 
 .div h1 { 
    -webkit-print-color-adjust: exact; 
   } 
}
```
Hope this helps you!!

Please reply if you find a better solution as this is what I could find after 2 hrs and it works for me.
0 讨论(0)
发布评论:

提交评论
- 加载中...
小鲜肉

2020-12-14 01:04

Some browsers add more respect to your gray if you add color: Replace #777 with #778. Be wary of opacity. Sometimes, even if the print preview will show great results, it only actually works on select printers. Printers with unlucky firmware will fail to print your text at all if it is gray using opacity.

0 讨论(0)
发布评论:

提交评论
- 加载中...
孤独总比滥情好

2020-12-14 01:05
You just need to output your grey font in svg. Browsers don't change color in svg. Here's an example:
```
<svg height="40" width="200">
   <text font-size="28px" y="25" x="30" fill="#ffffff" >
   Some text
   </text>
</svg>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
失恋的感觉

2020-12-14 01:12

This solution working in all browsers:

.text{ color: transparent; text-shadow: 2px 0 #red; }

0 讨论(0)
发布评论:

提交评论
- 加载中...

遥遥无期

2020-12-14 01:16

Solution:

  @media print {
      h1 {
        color: rgba(0, 0, 0, 0);
        text-shadow: 0 0 0 #ccc;
      }

      @media print and (-webkit-min-device-pixel-ratio:0) {
        h1 {
          color: #ccc;
          -webkit-print-color-adjust: exact;
        }
      }
   }

0 讨论(0)

1 2 下一页