Question

相关： How to get a background image to print using css?

我知道浏览器在打印时不会渲染CSS背景。

我正在使用div制作一个简单的条形图，即

<div style="width: 10px; height: 43%; background-color: blue;" title="Series A - 43%">A</div>
<div style="width: 10px; height: 55%; background-color: green;" title="Series B - 55%">B</div>

有没有办法在图表中“着色”以便正确打印？

Answer 1

您可以在DIV中绝对定位图像。你将无法使用百分比，你需要像素：

<div style="width: 10px; height: 43%; background-color: blue;position:relative" title="Series A - 43%">
<span>A</span><img style="position:absolute;top;0px;left:0px;width:10px;height:43px" src="green.gif /></div>

您可能必须将标签放在范围内并设置图像的z-index与标签。如果您使用类似“绿色”的类名，您可以编写一些JavaScript，以便根据自动读取类名和DIV维度动态插入IMG。

不是一个简单的解决方案，但值得一试。或者，有些实用程序可以在服务器上生成PDF，然后将其用于下载或打印。

Answer 2

好的，目前正在执行以下操作：

<div style="width: 10px; border-bottom: 43px solid blue;" title="Series A - 43%"><span style="position: absolute;">A</span></div>

这会丢弃百分比高度，有利于像素高度。 css边框打印好。我正在做一些进一步的CSS定位，将内联文本（'A'）移动到正确的位置。

对此有何进展？

Answer 3

我认为你正在使用边框。您应该能够继续使用百分比宽度/高度。尝试使用一些负边距来定位条形标签。

<hmtl>
<head>
<style type="text/css"> 
    .graph { border:solid 1px #aaa; background-color:#eee; height:200px; width:260px; }
    .graph h1 { color:#000; font-size:1.4em; }
    .graph p { color:#fff; }
    .graph div {  margin-top:8px; } 
    .graph div div { margin-top:-10px; }    

</style>
</head>
<body>

    <div class="graph">
        <h1>Graph 1.1</h1>
        <p>Graph description</p>

        <div style="height:0px; width:43%; border-top:solid 7px blue; border-bottom:solid 7px blue;"  title="Series A - 43%"><div>A</div></div>
        <div style="height:0px; width:55%; border-top:solid 7px lime; border-bottom:solid 7px lime;" title="Series B - 55%"><div>B</div></div>
        <div style="height:0px; width:10%; border-top:solid 7px pink; border-bottom:solid 7px pink;" title="Series c - 10%"><div>C</div></div>
        <div style="height:0px; width:90%; border-top:solid 7px orange; border-bottom:solid 7px orange;" title="Series D - 90%"><div>D</div></div>
    </div>
</body>
</html>

Css - 填充区域的颜色（内容）

3 个答案: