我可以强制文本打印为白色吗？

Question

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

我应该提一下,我非常了解打印样式表,只是不管设置字体颜色,在IE/chrome/firefox中,字体都不会显示为白色.根据浏览器的不同,它会变成黑色或灰色.如果你认为它实际上是可能的,请在图像上显示白色文本的示例.

为了说明看:

http://jsfiddle.net/NSwYE/

由于印刷方式的原因,我个人认为不可能.这非常令人讨厌.

Answer 1

这并不完全控制网页作者.

例如,这个小提琴将在三个黑色背景中的任何一个上打印(至少它在戴尔1720激光打印机上为我做了)白色文本

IE9

如果该用户已经检查发现旁边的复选框:

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

如果未选中该框,则它将不会在前两个框中打印黑色,但将在最后一个(因为它是img标记)上打印,但它将文本打印为灰色,甚至在img标记上.因此,似乎"打印背景颜色和图像"的设置会影响浏览器解释文本的方式,并且如果选中则会允许真正的白色(敲除效果),但如果未选中则不会.

火狐

在这里找到复选框(似乎工作):

文件 - >页面设置 - >"打印背景(颜色和图像)"

对于Chrome？网页作者受控？

我还没有确认这篇文章中的信息是否会这样做(在我的下一个小提琴中它对我不起作用,但可能是因为它在iframe中).对于应在Chrome中打印的元素,请尝试设置:

-webkit-print-color-adjust: exact;

Answer 2

明确的答案是错的.您可以在每个浏览器中控制文本颜色!你只需要在svg中输出文本.浏览器不会改变svg中的颜色.这是一个例子:

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

Answer 3

print.cssEric 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;
}

}

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

Answer 4

解：

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