@media print颜色样式不起作用

最新推荐文章于 2025-03-17 16:48:33 发布

666小肥肥666

最新推荐文章于 2025-03-17 16:48:33 发布

阅读量4.2k

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_41115103/article/details/106538333

版权

当在CSS中使用@media print定义打印样式时，发现颜色设置无效。原来浏览器默认将打印颜色设置为黑色。要改变这种情况，需要重写浏览器的默认颜色。通过修改代码并进行测试，可以成功让打印样式中的颜色正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预期效果：

在这里插入图片描述

原代码：

/*  打印样式*/
@media print { 
	 #contendmidd tr{
		line-height: 13px;
	 }	 
	td.tdStyle {		
        color: red !important; 
	}	
	.width100{
		font-size: 12px;
		width: 20%;
		text-align: center;
		font-family:cursive;
	}	
}

分析：
@media print中字体大小，行高，宽度属性均起作用，只有颜色设置后无任何变化，查阅文档后发现在浏览器中重写了颜色为黑色，若想改变颜色，需重写浏览器覆盖的颜色代码，修改如下：

正确代码

/*  打印样式*/
@media print { 
	 #contendmidd tr{
		line-height: 13px;
	 }	 
	td.tdStyle {
		background: transparent !important;
        color: red !important; // Black prints faster: h5bp.com/s
        box-shadow: none !important;
        text-shadow: none !important;
	}	
	.width100{
		font-size: 12px;
		width: 20%;
		text-align: center;
		font-family:cursive;
	}		
}