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

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

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

6
css html image

2 ответов

по умолчанию браузер игнорирует правила CSS фона при печати страницы, и вы не можете преодолеть это с помощью 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 один. Это не только семантически неверно, но и делает график менее полезным для пользователей. Встроенный образ намного лучше, и если вы можете, это то, что вы должны использовать.

22

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

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

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

@media print {
* {
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
    color-adjust: exact !important;  /*Firefox*/
  }
}
6