오늘 프론트 엔드에 인쇄하는 함수를 작성했는데, 인쇄 시 설정된 배경색이 작동하지 않는 매우 안타까운 문제가 발생했습니다.
작동하지 않았던 CSS 스타일:
.p_class2_1{ color:white; float:left; background: #808080!important; width:80%; } .p_class3_1{ color:white; float:left; background: #808080!important; width:100%; } .p_class5_1{ color:white; background: #808080!important; width:100%; }
결과가 작동하지 않았습니다. 아무튼
나중에 다양한 방법으로 해결했습니다.
해결 코드는 다음과 같습니다.
.p_class2_1{ color:white; float:left; background: #808080!important; filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080'); width:80%; } .p_class3_1{ color:white; float:left; background: #808080!important; filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080'); width:100%;} .p_class5_1{ color:white; background: #808080!important; filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#808080',EndColorStr='#808080'); width:100%;} @media print { .p_class2_1 {-webkit-print-color-adjust: exact;} .p_class3_1 {-webkit-print-color-adjust: exact;} .p_class5_1 {-webkit-print-color-adjust: exact;} }
결과는 다음과 같습니다.
이전에는 표시되지 않았던 배경색이 이제 표시됩니다!
가장 중요한 코드는 @media print { <code>@media print { <br>
.p_class2_1 {-webkit-print-color-adjust: exact;} <br>
.p_class3_1 {-webkit-print-color-adjust: exact;} <br>
.p_class5_1 {-webkit-print-color-adjust: exact;} <br>
}
.p_class2_1 {-webkit-print-color-adjust: 정확;}
위 내용은 웹에서 인쇄할 때 주의해야 할 CSS 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!