0

我正在尝试为单色设备设置一些替代样式 - 即黑白打印输出。

我以为我可以使用一个简单的 css 媒体查询来做到这一点，但它不起作用。

.Something { color: red; }
@media all and (monochrome) 
{
  .Something { color: black; }
}

当我尝试打印（或预览）它时，不会应用单色样式。

上面是一个糟糕的例子，但我设置了一个 JSFiddle：

http://jsfiddle.net/qC3af/

在 Firefox 中查看上述打印预览时，既不应用彩色也不应用单色。在 chrome 中，即使在黑白模式下，它也能保持颜色特征。

我错过了什么？

我确实注意到 JSFiddle 突出显示的颜色与所有其他媒体查询不同。这是一个线索吗？

4

2 回答 2

1

一般来说，这是不可靠的。您可以在此处查看说明：

http://www.quirksmode.org/css/tests/mediaqueries/color.html

我会注意到我的角落认为它至少有 16 个但不是 32 个颜色索引，所以它似乎知道它有 16 种色调，但随后它误标记了它们并未能通过单色测试......

实际上，浏览器无法完全了解其显示。例如，它可能正在向具有比真实硬件更多功能的虚拟设备显示。

于 2013-06-25T11:01:05.067 回答
0

首先，我通常@media print用于我的打印操作。在媒体打印里面你可以设置@page

例如，假设您想在横向模式下打印页面。这简直完美。

@media print {
    @page {
        size: landscape;
    }
}

对于您的问题，我会使用@media print. 在正文选择器内，您可以使用filter: grayscale(100%);

所以代码看起来像这样。

 @media print {
        body {
            filter: grayscale(100%);
        }
    }

如果您针对较旧的 IE，您应该filter: Gray();为 Safari 和 Opera 添加filter: url('#grayscale');

这是最终代码...

@media print {
  body {
    /* IE4-8 and 9 */
    filter: Gray();
    /* SVG version for IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 */
    filter: url('#grayscale'); 
    /* CSS3 filter, at the moment Webkit only. Prefix it for future implementations */
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); /* future-proof */
  }
}
于 2018-10-11T10:09:45.473 回答