Rumah >hujung hadapan web >tutorial css >web打印时需要注意的CSS样式
今天写了一个在前端打印的功能,遇到了一个很坑的问题,设置的背景色打印的时候不起作用:
不起作用的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 { <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>
}
@media print是为了让打印的时候显示背景色,默认是不显示的!
Atas ialah kandungan terperinci web打印时需要注意的CSS样式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!