Css - fill area with color (content)
Related: How to get a background image to print using css?
I'm aware that browsers don't render CSS backgrounds when printing.
I'm making a simple bar graph using div开发者_如何学编程s i.e.
<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>
Is there any way to 'color in' the graph such that it prints correctly?
I think you're on to something using the border. You should be able to continue using a percentage width / height. Try using some negative margins to position the bar label.
<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>
You can absolutely-position an image in your DIV. You won't be able to use percentages, you'll need pixels:
<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>
You'll probably have to put the label in a span and set the z-index of the image vs. the label. If you use a class name like "green" you could probably write some JavaScript to dynamically insert the IMG based on reading the class names and the DIV dimensions automatically.
Not a simple solution, but worth a try. Alternately there are utilities that will generate a PDF on the server then serve it up for downloading or printing.
Ok currently doing the following:
<div style="width: 10px; border-bottom: 43px solid blue;" title="Series A - 43%"><span style="position: absolute;">A</span></div>
This discards the percentage height, in favour of pixel height. The css border prints ok. I'm doing some further css positioning to move the inline text ('A') to the right place.
Any advance on this?
加载中,请稍侯......
精彩评论