Как принудительно напечатать фоновое изображение в HTML?

Мне нужно распечатать страницу отчета с несколькими фоновыми изображениями. Но только эти изображения не для печати. Эти изображения являются логотипами для графика и, следовательно, очень важны в отчете.

У меня есть еще один вариант, который я могу обрезать их и включить в страницу в качестве тега, но это последний вариант. Поэтому до этого я хотел бы знать, есть ли способ принудительно напечатать эти изображения? Кто-нибудь может мне помочь?

 Yoko Zunna28 июн. 2012 г., 13:13
Отослать этоlink... Вы получите отличное представление о том, как напечатать фоновое изображение.

Ответы на вопрос(2)

когда вы добавляете! важный атрибут к фоновому изображению, убедитесь, что вы сначала добавили атрибут и попробуйте снова, вы можете сделать это, как

.class-name {
    background: url('your-image.png') !important;
}

также вы можете использовать эти полезные рулон печати и положить его в конец файла CSS

@media print {
* {
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
    color-adjust: exact !important;  /*Firefox*/
  }
}
Решение Вопроса

ы, и вы не можете преодолеть это с помощью CSS.

Пользователь должен будет изменить настройки своего браузера.

Поэтому любое изображение, которое вам нужно напечатать, должно отображаться как встроенное изображение, а не как CSS-фон. Вы можете использовать css для отображения встроенного изображения только для печати. Что-то вроде этого.

HTML

<div class"graph-image graph-7">
  <img src="graph-7.jpg" alt="Graph Description" />
</div>

CSS

.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}

@media print{
  .graph-image img{display:inline;}
}

Использование этого кода или аналогичного кода означает, что изображение используется один раз в html и один раз в css. HTML-версия скрыта с помощью css, и для печати она отображается как обычно. Это взлом, но он будет делать то, что вы хотите. Это напечатает изображение.

Сказав это, то, что вы делаете, является ужасно плохой практикой. Ничто, передающее пользователю значимую информацию, не должно передаваться с использованием одной только css. Это не только семантически неверно, но и делает график менее полезным для пользователей. Встроенное изображение намного лучше, и если вы можете, это то, что вы должны использовать.

Ваш ответ на вопрос