打印图例

Question

div.task_finished { background-color:#6b86a6; }
div.task_pending_execute { background-color:#93b8e2; }
div.task_cancelled  { background-color:#ff9966; }
div.task { background-color:#ffffcc; }

现在我要打印这个

<div class="legend-container">
            <div class="legend">
                <div class="task_pending_execute"></div>
                <div class="legend-text">Executing</div>
            </div>
            <div class="legend">
                <div class="task_cancelled"></div>
                <div class="legend-text">Finished</div>
            </div>
        ...
</div>

对于IE图形呈现为图像。

默认情况下，用户浏览器设置为不打印background-color，但在这种具体情况下这是不可接受的

我仍然不想通过图像替换'颜色'div。

我应该使用什么css属性？

Answer 1

您可以尝试使用彩色边框，如下所示：

div.task_finished { border-left:#6b86a6 solid 100px; height: 1em; }

但是，我不确定IE在打印时是否将边框视为背景或前景。

[编辑：另一个想法]

另一种解决方案是使用Unicode Block Elements，然后设置前景（文本）颜色。

<div>&#x2588;&#x2588;&#x2588;&#x2588;&#x2588;</div>
<div>█████</div>

但是，如果系统没有正确的unicode支持或没有正确的字体，这将失败。

此外，它会让您无法控制图例的宽度，因为不同的字体具有不同的宽度。 （也许CSS @font可以帮助你解决这个问题，但我不确定）

最后，根据字体的不同，每个字符之间可能存在可见的“接缝”。 （这可以通过设置否定letter-spacing）

来“修复”

Answer 2

你不能真正做任何事情。背景颜色/图像打印是一种打印机选项，而不是您应该依赖的东西 - http://css-tricks.com/dont-rely-on-background-colors-printing/