当前位置： 文江博客话题详情

灰色字体彩色打印

发布于 2024-12-07 11:39:29 字数 170 浏览 4 评论 0原文

有什么方法可以确保我的灰色字体颜色不会变黑？

Firefox 和 Chrome 这样做似乎是为了防止黑底白字变成白底白字。我没有背景颜色（白色除外），因此这种浏览器级转换没有用，它只能帮助无缘无故地防止灰色。

有办法关掉它吗？或者我应该坚持使用不透明度、浏览器检测和灰色着色等技术......

原文

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 turning into white on white. I do not have a background color (except white), so this browser-level conversion is not useful, it only helps in preventing grey colors for no reason.

Is there a way to turn this off? Or should I just stick with techniques like opacity, browser detection, and coloring my grays...

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（9）

·深蓝 2024-12-14 11:39:29

解决方案：

  @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;
        }
      }
   }

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;
        }
      }
   }
回复 原文
菊凝晚露 2024-12-14 11:39:29

我发现必须：

  1. 将 !important 添加到 css 规则...和...

  2. 在 Firefox 打印对话框中，勾选“外观：打印背景”选项颜色”

我无法让它在 Chrome 中工作。

I found had to :

  1. Add !important to the css rule... and...

  2. In the Firefox print dialog, tick the option for "Appearance: Print background colors"

I couldn't get it to work in Chrome.

回复 原文
累赘 2024-12-14 11:39:29

我认为这是该页面上唯一的 div。进行以下更改，它应该可以正常工作。

<style>
@media print {
div.red {
      color: #cccccc !important;
  }
</style>

并更改 div 标签的 html，如下所示

I thought that is the only div on that page. Make the following change, it should work fine.

<style>
@media print {
div.red {
      color: #cccccc !important;
  }
</style>

And change the html of the div tag like below

回复 原文
烦人精 2024-12-14 11:39:29

如果您添加颜色，某些浏览器会更加尊重您的灰色：将 #777 替换为 #778。警惕不透明现象。有时，即使打印预览显示出很好的结果，它实际上也只适用于选定的打印机。如果使用不透明度将文本显示为灰色，则具有不幸固件的打印机将根本无法打印文本。

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.

回复 原文
想你只要分分秒秒 2024-12-14 11:39:29

你只需要在 svg 中输出你的灰色字体。浏览器不会改变 svg 中的颜色。这是一个例子：

<svg height="40" width="200">
   <text font-size="28px" y="25" x="30" fill="#ffffff" >
   Some text
   </text>
</svg>

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>
回复 原文
无远思近则忧 2024-12-14 11:39:29

我发现文本颜色不是由“通用”样式表继承，而是必须在打印CSS文件中再次强制。

换句话说，即使在通用 css 文件（带有 media='all' 属性的文件）中设置了文本颜色，打印时也会被忽略，至少在 Firefox 和 Chrome 中是这样。

我发现在打印CSS文件中再次写入（多余但......必要）文本颜色（带有 media='print' 属性），现在将考虑颜色。

I found that TEXT color is not inherited by "general purpose" stylesheet, but must be forced again in print css file.

In other words, even if text color is set in the general css file (one with media='all' attribute), it is ignored when printed, at least in Firefox and Chrome.

I found that writing again (redundant but..... necessary) text color in print css file (one with media='print' attribute), color now will be considered.

回复 原文
所有深爱都是秘密 2024-12-14 11:39:29

该解决方案适用于所有浏览器：

.text{
颜色：透明；
文本阴影：2px 0 #red；
}

This solution working in all browsers:

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

回复 原文
ペ泪落弦音 2024-12-14 11:39:29

重视颜色：

.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>

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>
回复 原文
挽手叙旧 2024-12-14 11:39:29

以上对我来说都不起作用，所以我终于弄清楚了。

始终为直接元素赋予颜色。前任。假设你的 html

<div class='div'><br/>
      < h1>Text< /h1><br/>
</div>

和 CSS

.div { 
     color: #ccc; 
    }

这是我的情况。在这种情况下，无论您做什么，颜色都不会显示。

你必须这样做

.div h1 { 
 color: #ccc; 
}

@media print { 
 .div h1 { 
    -webkit-print-color-adjust: exact; 
   } 
}

希望这对你有帮助！

如果您找到更好的解决方案，请回复，因为这是我 2 小时后找到的，并且它对我有用。

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.

回复 原文
~没有更多了~

关于作者

傾城如夢未必闌珊

暂无简介

文章
评论
613 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

qq_VRzBBA45

文章 0 评论 0

痴情

文章 0 评论 0

。

文章 0 评论 0

Mu.

文章 0 评论 0

凉薄对峙

文章 0 评论 0

不落城

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文