>  기사  >  웹 프론트엔드  >  웹에서 인쇄할 때 주의해야 할 CSS 스타일

웹에서 인쇄할 때 주의해야 할 CSS 스타일

一个新手
一个新手원래의
2017-09-14 11:11:091963검색

오늘 프론트 엔드에 인쇄하는 함수를 작성했는데, 인쇄 시 설정된 배경색이 작동하지 않는 매우 안타까운 문제가 발생했습니다.
작동하지 않았던 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%;
}

결과가 작동하지 않았습니다. 아무튼
웹에서 인쇄할 때 주의해야 할 CSS 스타일

나중에 다양한 방법으로 해결했습니다.
해결 코드는 다음과 같습니다.

.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;} 
    }

결과는 다음과 같습니다.
웹에서 인쇄할 때 주의해야 할 CSS 스타일

이전에는 표시되지 않았던 배경색이 이제 표시됩니다!
가장 중요한 코드는 @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: 정확;}

.p_class3_1 {-webkit-print-color-adjust: 정확;}
.p_class5_1 {-webkit-print-color-adjust: 정확;}
} @media print는 인쇄할 때 배경색을 표시하기 위한 것입니다. 기본적으로 표시되지 않습니다! 🎜🎜🎜

위 내용은 웹에서 인쇄할 때 주의해야 할 CSS 스타일의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.