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

有什麼辦法來圖「顏色」，使得它打印正確？

來源

2011-08-30 EoghanM

我認爲你在使用邊界的東西。您應該能夠繼續使用百分比寬度/高度。嘗試使用一些負邊距來定位條形標籤。

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

來源

2011-08-30 17:25:28 jim31415

完美 - 該解決方案可以輕鬆地爲我原來的垂直圖作爲鋼筋尺寸（寬適應在你的情況）是正交的邊界。你甚至可以應用文本對齊：中心;到您的文本 – EoghanM

在你的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動態插入IMG基於自動讀取類名和DIV尺寸。

不是一個簡單的解決方案，但值得一試。或者，還有一些實用程序會在服務器上生成PDF，然後將其用於下載或打印。

來源

2011-08-30 15:30:05

據算法着色，我沒有辦法產生color_field.gif顏色= ff0022尚未.. – EoghanM

好目前做如下：

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

該丟棄的比例高，有利於像素的高度。 css邊框打印確定。我做一些進一步的CSS定位移動嵌入式文本（「A」）到正確的位置。

對此有何進展？

來源

2011-08-30 16:25:12 EoghanM

的CSS - 用顏色填充（內容）區域

回答

相關問題