Css - 用颜色（内容）填充区域答案

【问题标题】：Css - fill area with color (content)Css - 用颜色（内容）填充区域
【发布时间】：2011-08-30 15:04:50
【问题描述】：

我知道浏览器在打印时不会呈现 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>

有什么方法可以为图表“着色”以使其正确打印？

【问题讨论】：

标签： css printing

【解决方案1】：

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

<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>

【讨论】：

完美 - 这个解决方案可以很容易地适应我原来的垂直图，因为条形大小（在你的情况下是宽度）与边界正交。你甚至可以应用 text-align: center;到你的文字

【解决方案2】：

您可以在 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 与标签。如果你使用像“green”这样的类名，你可能会编写一些 JavaScript 来根据自动读取类名和 DIV 尺寸来动态插入 IMG。

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

【讨论】：

它是算法着色的，我还没有办法生成 color_field.gif?color=ff0022..

【解决方案3】：

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

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

这会丢弃百分比高度，转而使用像素高度。 css 边框打印正常。我正在做一些进一步的 css 定位以将内联文本 ('A') 移动到正确的位置。

这方面有什么进展吗？

【讨论】：