怎样设置网页的打印背景_STYLE属性控制媒体查询样式-html教程-PHP中文网

background-color 在打印时消失是因浏览器默认禁用背景图形，需显式声明 print-color-adjust: exact 和 -webkit-print-color-adjust: exact 才能生效。

怎样设置网页的打印背景_style属性控制媒体查询样式

为什么 background-color 在打印时消失

不是你写错了，是浏览器默认禁用背景图形打印——Chrome、Edge、Firefox 都把 background-color 和 background-image 当作“非必要耗材”，直接丢弃。哪怕你在 @media print 里写了 body { background-color: #eee; }，也大概率白写。

根本原因在于 print-color-adjust 的默认值是 economy，它允许浏览器强制转为黑白+清空背景。要翻盘，必须显式声明：

-webkit-print-color-adjust: exact !important;（Chrome / Edge / Safari）
print-color-adjust: exact !important;（标准属性，Firefox 支持）
这两条得加在需要显示背景的元素上，不能只写在 body；比如表格行要带底色，就得写 tr { -webkit-print-color-adjust: exact; }

@media print 里 background 相关样式怎么写才生效

别用 background 简写——它容易漏掉 print-color-adjust，而且一旦某条子属性（如 background-image）被重置，整个简写就失效。稳妥做法是拆开写：

用 background-color 单独设色，不混图像：.header { background-color: #007bff !important; -webkit-print-color-adjust: exact; }
要用背景图？先确认打印机固件是否支持；若必须上，用 background-image + background-size: contain + background-repeat: no-repeat，再补 print-color-adjust
绝对避免 background: url(...) #fff 这种写法——background 会覆盖前面所有子属性，print-color-adjust 就失效了

用

两者语法等价，但实际效果常不同：前者是独立样式表节点，后者是内联规则块。问题出在层叠顺序和 !important 覆盖能力上。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

如果主 CSS 文件里有 nav { display: block !important; }，那 @media print nav { display: none; } 就会被干掉——!important 优先级相同，后定义者胜；但 <style media="print"></style> 是最后解析的，更容易压过旧规则
<link rel="stylesheet" media="print" href="print.css"> 最稳，因为它是独立资源，无 CSS 文件内冲突风险，且可异步加载
调试时，在 DevTools 的 Elements 面板右上角切换到 “Print” 媒体类型，看 computed 样式里 background-color 是否被标记为 “active”，而不是灰掉

@page 规则对 background 没用，别在这儿浪费时间

@page 只能控制 margin、size、orphans、widows 和分页行为，它**完全不能设置背景色或背景图**。你写 @page { background: #f0f0f0; } 浏览器会静默忽略，连 warning 都不报。

真正要给“整张纸”加底色，唯一办法是让 body 或 html 全高撑满，并设 background-color + print-color-adjust。注意两点：

html, body { height: 100%; margin: 0; } 必须写，否则 body 高度不足，底色只盖住内容区
不要用 vh 单位——打印引擎不识别视口单位，只认 pt、mm、in；A4 宽 210mm，高 297mm，可据此设 min-height: 297mm

最易被忽略的一点：某些 UI 框架（如 Bootstrap 5）自带 @media print 重置块，会把你的 background-color 清成 transparent。务必在 DevTools 的 Computed 面板切到 Print 媒体下，逐层查最终生效值，而不是只看 Styles 面板里的规则。