цвет не отображается при предварительном просмотре, но отображается при простом просмотре

Question

Я новичок в css и делаю ваучер предварительного просмотра для печати.Классы, которые я использую, работают правильно в простом представлении, но не работают при предварительном просмотре, например.

Предварительный просмотр

это код CSS

.titlebar{
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #03320E 25%, #273E29 76%) repeat scroll 0 0;
    color:#ffffff}

тот же код в

@media print{
  .titlebar{
     background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #03320E 25%, #273E29 76%) repeat scroll 0 0;
     color:#ffffff}

}

здесь мои заголовочные файлы, которые яЯ в том числе.assets / bootstrap / css / bootstrap.css "rel =" таблица стилей "type =" text / css "/>
assets / font-awesome / css / font-awesome.min.css" rel = "stylesheet" type ="text / css" />

<!-- AdminLTE Skins. Choose a skin from the css/skins 
     folder instead of downloading all of them to reduce the load. -->
 <link href="<?php echo base_url(); ?>assets/bootstrap-daterangepicker-master/daterangepicker.css" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url(); ?>assets/dist/css/skins/_all-skins.css" rel="stylesheet" type="text/css" />

<link href="<?php echo base_url(); ?>assets/js/fileinput.css" rel="stylesheet" type="text/css" />
<link href="<?php echo base_url(); ?>assets/dist/css/AdminLTE.css" rel="stylesheet" type="text/css" />

и код стиля css находится в AdminLTE.css.

Answer 1

попробуйте это,

Добавьте атрибут медиа в тег ссылки, он будет работать.

<link media="print" rel="stylesheet" href="<?php echo base_url(); ?>assets/bootstrap-daterangepicker-master/daterangepicker.css"  type="text/css" />

Answer 2

.titlebar{
			width: 100%;
			height: 55px;
			background: #03320E;
		    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(#03320E 25%, #273E29 76%) repeat scroll 0 0;
		    background: rgba(0, 0, 0, 0) -o-linear-gradient(#03320E 25%, #273E29 76%) repeat scroll 0 0;
		    background: rgba(0, 0, 0, 0) linear-gradient(#03320E 25%, #273E29 76%) repeat scroll 0 0;
		    color:#ffffff;
		}
		@media print{
			body {
			    -webkit-print-color-adjust: exact;
			}
		}

<div class="titlebar"></div>

Пожалуйста, добавьте ниже код внутри @media print {}

body {
    -webkit-print-color-adjust: exact;
}

Answer 3

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

Например, в Chrome необходимо нажать «Расширенные настройки» и установить флажок «Фоновая графика».