Фоновое изображение таблицы - PullRequest
Новая
       28

Фоновое изображение таблицы

0 голосов
/ 16 сентября 2010

Нам нужно установить фоновое изображение таблицы.Одним из способов является установка атрибута фона тега таблицы, но для этого необходимо включить опцию printbackground в браузере при печати.Любой другой выход, как мы можем установить z-индекс изображения и таблицы?

Ответы [ 2 ]

0 голосов
/ 16 сентября 2010

Это действительно CSS-очередь.z-index действует только тогда, когда объекты расположены абсолютно.Он используется для ручной установки порядка отображения элементов друг над другом.Если HTML-элемент появляется после другого, по умолчанию он отображается поверх другого, и вы можете использовать z-index для переопределения этого значения по умолчанию. 

<img src="some image"/>
<div>some text</div>

<style type="text/css">
img, div {
    position: absolute;
}
</style>

В приведенном выше html div будет отображаться наtop, и z-index можно использовать для изменения этого.

Чего вы пытаетесь добиться, отображая фоновое изображение для таблицы, в том числе когда она печатается - я прав?Ваша проблема в том, что по умолчанию большинство браузеров не печатают фоновые изображения (чтобы сэкономить на чернилах и чтобы было легче читать).Обычно вы можете печатать с фоновыми изображениями в настройках браузера, если хотите, поэтому, возможно, вам не нужно принудительно устанавливать это на своем сайте, вместо этого просто обратите внимание пользователей на включение фоновых изображений в своих настройках печати?

Но если вы действительно хотите заставить пользователей печатать фоновое изображение, ваш код может выглядеть примерно так: 

<img class="table-bg-image" src="http://www.google.com.au/intl/en_com/images/srpr/logo1w.png"/>
<table class="with-bg-image">
    <tr><td>Table contents here</td></tr>
</table>

<style type="text/css">
    img.table-bg-image {
        position: absolute;
        z-index: -1;
    }
    table.with-bg-image, table.with-bg-image tr, table.with-bg-image td {
        background: transparent;
    }
</style>

Не забудьте сравнить размер изображения с размером таблицы.

Позиционирование изображения абсолютно приведет к тому, что оно будет «плавать» под столом, потому что, если вы не установите атрибуты «top» и «bottom», абсолютное позиционирование не меняет положение элементов (это означает толькоэто не занимает никакой комнаты).Тот факт, что элемент абсолютно позиционирован, заставляет его отображаться над таблицей по умолчанию, поэтому мы используем отрицательный z-индекс, чтобы он появился позади.

0 голосов
/ 16 сентября 2010

Вы можете поместить DIV позади и поместить туда изображение, затем расположить стол точно над ним.Вуаля.

...