Css - заполнить область цветом (содержание) - PullRequest
Новая
       0

Css - заполнить область цветом (содержание)

1 голос
/ 30 августа 2011

Похожие: Как получить фоновое изображение для печати с использованием css?

Мне известно, что браузеры не отображают CSS-фоны при печати. ​​

Iделаю простую гистограмму, используя 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>

Есть ли способ «раскрасить» график так, чтобы он печатался правильно?

Ответы [ 3 ]

0 голосов
/ 30 августа 2011

Хорошо, в настоящее время делаем следующее: 

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

Отбрасывает процентную высоту в пользу высоты пикселя. Граница CSS печатается нормально. Я делаю дальнейшее позиционирование CSS, чтобы переместить встроенный текст ('A') в нужное место.

Есть ли какие-либо авансы по этому вопросу?

0 голосов
/ 30 августа 2011

Я думаю, что вы что-то используете, используя границу. Вы должны быть в состоянии продолжать использовать процент ширины / высоты. Попробуйте использовать несколько отрицательных полей для позиционирования метки бара. 

<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>
0 голосов
/ 30 августа 2011

Вы можете абсолютно позиционировать изображение в 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-индекс изображения в сравнении с меткой. Если вы используете имя класса, например «зеленый», вы, вероятно, могли бы написать JavaScript для динамической вставки IMG на основе автоматического чтения имен классов и измерений DIV.

Не простое решение, но стоит попробовать. Кроме того, существуют утилиты, которые генерируют PDF на сервере, а затем подают его для загрузки или печати. ​​

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...