核心方法：使用 @media print 媒体查询
这是最标准、最推荐的方法，通过CSS的 @media print 规则，你可以专门为打印场景编写样式。
（图片来源网络，侵删）
关键CSS属性：
-webkit-print-color-adjust: exact;和print-color-adjust: exact;- 这是最重要的属性！ 它明确告诉浏览器（尤其是基于WebKit/Blink的浏览器，如Chrome, Edge, Safari）在打印时要保留颜色和背景，即使它们是装饰性的，旧版IE不支持此属性，但现代浏览器都支持。
background: ...;- 在
@media print块内，重新定义你想要在打印时显示的背景颜色或图片。
- 在
如何操作（分步指南）
直接修改网页的CSS文件（推荐）
这是最专业、最持久的方法。
-
找到你的CSS文件：通常是
.css文件，或者在HTML文档的<style>标签内。 -
添加
@media print代码块：在CSS文件末尾或合适的位置，添加以下代码。/* 其他你的常规样式... */ /* 专门针对打印的样式 */ @media print { /* 关键：强制浏览器打印背景 */ -webkit-print-color-adjust: exact; print-color-adjust: exact; /* * 在这里为需要打印背景的元素添加背景样式 * 为整个页面添加白色背景 */ body { background: white !important; /* 使用 !important 确保覆盖其他可能存在的样式 */ } /* 为某个特定卡片添加背景 */ .my-card { background: #f0f8ff; /* 淡蓝色背景 */ border: 1px solid #ccc; } } -
保存文件，然后刷新网页并打印，你就能看到背景了。
（图片来源网络，侵删）
使用浏览器的开发者工具进行临时调试（适合快速测试）
如果你只是想临时看一下打印效果,不想修改源代码，可以使用这个方法。
-
在网页上按下
F12键，打开开发者工具。 -
切换到 "Elements" (元素) 标签页。
-
在 "Styles" (样式) 面板中，找到你想要修改样式的元素（
body）。
（图片来源网络，侵删） -
点击 "New style rule" (新建样式规则) 图标，或者直接在现有样式中添加。
-
输入以下CSS代码：
@media print { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; background: white !important; }!important在这里很有用，可以确保你的临时样式优先级更高。
-
按下
Ctrl + P(Windows) 或Cmd + P(Mac) 打印预览，你会立即看到效果。这不会保存到你的实际源文件中。
最佳实践和注意事项
仅仅让背景显示出来是不够的,我们还需要优化打印体验。
考虑墨水消耗
深色背景或大面积的图片会消耗大量墨水,在打印时，考虑使用更浅、更柔和的颜色。
- 不推荐：
background: black; - 推荐：
background: #f9f9f9;(非常浅的灰色)
使用 background-image 的 image-rendering
如果你打印的是背景图片,可以添加 image-rendering: -webkit-optimize-contrast; 或 image-rendering: crisp-edges; 来让图片在打印时更清晰锐利。
@media print {
.my-background-image {
background-image: url('my-image.png');
-webkit-print-color-adjust: exact;
image-rendering: -webkit-optimize-contrast; /* 让图片更清晰 */
}
}
控制分页被“劈”在两页的尴尬位置。
page-break-after: always;：在元素之后始终分页。page-break-before: always;：在元素之前始终分页。page-break-inside: avoid;：避免在元素内部中断。
@media print {
/* 确保每个主要章节从新的一页开始 */
.section {
page-break-before: always;
}
/* 避免表格或图片被分割 */
table, img {
page-break-inside: avoid;
}
}
移除不必要的元素
打印时通常不需要导航栏、侧边栏、页脚的链接、按钮等，使用 display: none; 将它们隐藏。
@media print {
.navbar, .sidebar, .footer-links, .no-print {
display: none;
}
}
完整示例代码
下面是一个完整的HTML文件示例,你可以直接复制下来保存为 .html 文件，在浏览器中打开并打印，查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">打印背景示例</title>
<style>
/* 常规网页样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
/* 默认背景在打印时会被忽略 */
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
min-height: 100vh;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
}
.card {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}
.no-print {
background: #ffeb3b;
padding: 10px;
text-align: center;
border-radius: 5px;
margin-bottom: 20px;
}
/* 打印专用样式 */
@media print {
/* 1. 关键：强制打印所有背景 */
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
/* 2. 为body设置一个适合打印的浅色背景 */
body {
background: white;
}
/* 3. 隐藏不需要打印的元素 */
.no-print, .navbar, .no-print-button {
display: none;
}
/* 4. 优化卡片在打印时的外观 */
.card {
background: #f5f5f5; /* 使用浅灰色背景代替白色，减少纸张反光 */
border: 1px solid #ccc;
page-break-inside: avoid; /* 避免卡片被分页 */
}
/* 5. 确保标题不会在页末单独出现 */
h1, h2 {
page-break-after: avoid;
}
}
</style>
</head>
<body>
<div class="container">
<h1>打印背景测试页面</h1>
<p>这是一个测试页面，用于演示如何在打印时显示背景，请在浏览器中按下 Ctrl+P (或 Cmd+P) 进行打印预览。</p>
<div class="no-print">
<p>⚠️ 这部分内容在打印时会隐藏，请尝试打印！</p>
<button class="no-print-button">这是一个打印按钮，也会被隐藏</button>
</div>
<div class="card">
<h2>卡片 1</h2>
<p>这个卡片在屏幕上背景是白色，在打印时，它的背景会变成浅灰色（#f5f5f5），你可以看到背景色的变化。</p>
</div>
<div class="card">
<h2>卡片 2</h2>
<p>这是另一个卡片，页面整体的渐变背景在打印时会变成纯白色，这证明了 `@media print` 的作用。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
</div>
<div class="card">
<h2>长内容测试</h2>
<p>这里是一些较长的文本，用于测试分页效果，默认情况下，浏览器会智能地分页，但我们可以通过 `page-break-inside: avoid;` 来避免一个卡片被分页。</p>
<p>这是长文本的第二段，它仍然在同一个卡片内，如果你把卡片的高度设置得足够长，它仍然会作为一个整体被打印，不会被分割到两页上。</p>
</div>
</div>
</body>
</html>
- 核心：使用
@media print和-webkit-print-color-adjust: exact;。 - 优化：为打印场景选择合适的浅色背景。
- 清理：隐藏导航、按钮等非必要元素。
- 控制：使用
page-break-*属性优化分页。
遵循这些步骤,你就可以轻松地创建出打印效果良好、包含背景的专业文档。
