28

假设我有一些文本显示在图像或其他一些可打印的颜色上。打印时是否可以将此文本强制为白色？在大多数浏览器中，默认行为是强制将白色变为黑色或灰色。当您在删除了背景颜色/图像的容器中打印文本时，这显然是有意义的，但在您将文本覆盖在图像上的情况下强制文本是没有意义的。

我可能应该提一下，我非常了解打印样式表，碰巧无论在 IE/chrome/firefox 中设置字体颜色如何，字体都不会显示为白色。根据浏览器的不同，它最终会变成黑色或灰色。如果您认为实际上可行，请在图像上显示白色文本的示例。

为了说明见：

http://jsfiddle.net/NSwYE/

我个人认为这是不可能的，因为印刷的方式。还是挺烦人的。

4

9 回答 9

31

这并不完全由网页作者控制。

例如，这个小提琴将在三个黑色背景中的任何一个上打印（至少在戴尔 1720 激光打印机上对我来说是这样）白色文本

IE9

如果用户选中了旁边的框：

工具 -> 打印 -> 页面设置 -> “打印背景颜色和图像”

如果未选中该框，则它根本不会在前两个上打印黑色，但会在最后一个上打印（因为它是一个img标签），但它会将文本打印为灰色，即使在img标签上也是如此。因此，“打印背景颜色和图像”的设置似乎会影响浏览器解释文本的方式，如果选中则允许真正的白色（剔除效果），但如果未选中则不会。

火狐

在此处找到的复选框（似乎有效）：

文件 -> 页面设置 -> “打印背景（颜色和图像）”

对于铬？网页作者受控制？

我还没有验证这篇文章中的信息是否会这样做（在我的下一个小提琴中它对我不起作用，但可能是因为它在 iframe 中）。对于应该在 Chrome 中打印的元素，请尝试设置：

-webkit-print-color-adjust: exact;
于 2012-05-23T19:43:12.920 回答
12

标记的答案是错误的。您可以在每个浏览器中控制文本颜色！您只需要在 svg 中输出文本。浏览器不会改变 svg 中的颜色。这是一个例子：

<svg height="40" width="200">
   <text font-size="28px" y="25" x="30" fill="#ffffff" >
   Some text
   </text>
</svg>
于 2015-08-11T13:19:31.097 回答
10

print.css会帮助你的，Eric meyer 有一篇关于它的帖子。

例如html5boilerplate在他的 css上使用这种样式：

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

更新：

使用您的示例 html：

<img src="http://www.clipart.dk.co.uk/DKImages/Halloween/image_halloween002.jpg" alt="black cat">
<div id="sometext">Cat</div>

和我的CSS：

#sometext {
    position: absolute;
    top: 125px;
    left: 220px;
    color: #FFF; 
}

@media only print {

#sometext {
    color: #FFF !important;
    /* actually trick with white text-shadow not work ( */
    text-shadow: 0 0 3px #FFF !important;
}

}

我得到了这个演示。这是一个可接受的解决方案吗？

在此处输入图像描述 ​</p>

于 2012-05-21T11:32:57.793 回答
7

解决方案：

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

      @media print and (-webkit-min-device-pixel-ratio:0) {
        h1 {
          color: #fff;
          -webkit-print-color-adjust: exact;
        }
      }
   }
于 2014-04-23T14:12:26.437 回答
3

示例http://jsfiddle.net/NSwYE/为我在猫的顶部打印白色文本。但我使用的是 Firefox 3.6 和 Brother 激光打印机。

打印机的行为完全取决于打印机驱动程序和应用程序。我的打印机将使用 Firefox 正确打印示例。它将正确地从 Microsoft Publisher 打印灰度文本。它不会在 Microsoft Word 中打印灰度文本：文本始终为黑色。

于 2012-05-23T19:57:19.217 回答
0

可能，如果您使用打印特定样式表来设置它的样式。

例如

<link href="print.css" rel="stylesheet" media="print" />
于 2012-05-21T11:32:03.040 回答
0

这可能有点矫枉过正，但如果这是您反复需要的东西，您可以考虑使用画布或 SVG 生成内容（Raphael.js 将提供 IE 支持）。画布和 SVG/VML 元素都将在主要浏览器中以准确的颜色打印。

于 2014-11-14T21:34:03.567 回答
0 
/* Text color */
.element
{
   color:transparent; 
   text-shadow:0 0 0 #fff; 
}

/* Background color */
.element
{
   box-shadow:0 0 0 1000px #000 inset; 
}

在 Internet Explorer 中，您需要启用后台打印。在 Chrome 70、Firefox 60（禁用后台打印也可以）和 IE11 中测试。

它不需要计算 SVG 宽度，因为没有使用 SVG。

于 2018-11-29T15:19:37.587 回答
-1

尝试向 css 添加一个 !important 属性以使其正确打印，例如“color: white !important”

于 2021-12-29T14:51:30.140 回答