Содержимое для печати Загрузочный контент

Question

В настоящее время я работаю над проектом, используя Bootstrap 3.3.7, а также множество пользовательских CSS, и у меня возникают проблемы с созданием контента для печати.

Небольшой пример

.bg-stretch { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t bottom: 0; 
 
\t right: 0; 
 
\t left: 0; 
 
\t background-size: cover; 
 
\t background-image: url("https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg"); 
 
}

<link media="all" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="bg-stretch"></div>

Это создает фоновое изображение, которое выглядит хорошо, но если я пытаюсь напечатать его в Google Chrome с помощью Ctrl + P, даже если У меня есть проверено, все, что я получаю, - это пустая страница без изображения.

Если отключить загрузку (удалите <link>), тогда все будет работать отлично.

Я попытался решить эту проблему с ответом, публикуемым в this question, но добавление CSS в

@media print { 
    /* Your styles here */ 
} 

не решить мою проблему.

Как это исправить?

Answer 1

Это стили из файла bootstrap.css.

@media print { 
    *, 
    *:before, 
    *:after { 
    color: #000 !important; 
    text-shadow: none !important; 
    background: transparent !important; 
    -webkit-box-shadow: none !important; 
      box-shadow: none !important; 
    } 
} 

Попробуйте удалить background: transparent !important из этого.

В качестве альтернативы вы можете добавить !important правило к вам фон в CSS:

.bg-stretch { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    background-size: cover; 
    background-image: url("https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg") !important; 
} 

Answer 2

Используйте этот CSS код:

@media print{*{text-shadow:none !important;color:#000 !important;background:transparent !important;box-shadow:none !important;}