CSS @media打印背景色问题;
Wes*_*son 167 css media-queries
我是这家公司的新人,我们的产品使用了数英里的css.我正在尝试为我们的应用程序制作一个可打印的样式表,但我在@media print中遇到了背景色问题...
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
border-bottom: solid;
border-right: solid;
background-color: #c0c0c0;
}
}
其他一切工作,我可以修改边框等,但背景颜色将不会在打印中出现.现在我明白你们可能无法回答我的问题并提供更多细节,我只是好奇,如果有人之前有这个问题,或类似的东西.
dro*_*lex 231
要在Chrome中启用后台打印:
body {
-webkit-print-color-adjust: exact !important;
}
- 这似乎解决了我打印具有交替行颜色的表的问题. (7认同)
- firefox和IE中的替代品是什么 (3认同)
- 给将来的旅行者的说明：您可能想改用[`color-adjust`]（https://developer.mozilla.org/en-US/docs/Web/CSS/color-adjust）。 (3认同)
Rya*_*ier 223
如果用户在其打印设置中关闭了"打印背景颜色和图像",则没有CSS会覆盖它,因此始终考虑到这一点.这是默认设置.
一旦这样设置,它将打印背景颜色和图像,你有什么工作.
它存在于不同的地方.在IE9beta中,它可以在Paper选项下的Print-> Page Options中找到
在FireFox中,它位于选项下的页面设置 - > [格式和选项]选项卡中.
- 使用Chrome和Safari,您可以添加css样式"-webkit-print-color-adjust:exact;" 要强制打印背景颜色和/或图像的元素 (149认同)
- @MarcoBettiolo似乎不适用于最新的webkit构建,但重要的是 (11认同)
- 太棒了,你刚刚把我的大脑拯救了几个小时. (9认同)
- 为了对此进行扩展，我添加了颜色调整：为FF工作。所以我的完整代码是`* {color-adjust：-webkit-print-color-adjust：精确；打印颜色调整：精确；}` (9认同)
- 添加!对规则很重要也为我解决了. (2认同)
T4N*_*K3R 75
GOT iT - 即使问题在几年前"关闭" :)
CSS:box-shadow:inset 0 0 0 1000px gold;
适用于所有盒子 - 包括桌子!
(如果要相信PDF打印机输出文件..？)
- 仅在Ubuntu上的Chrome + Firefox中测试过...
- 您可以使用`-ms-filter添加IE8和IE9支持:"progid:DXImageTransform.Microsoft.gradient(GradientType = 0,startColorstr ='#fffada',endColorstr ='#fffada')";/*IE8*/`如果你想要你的精灵图像可见,请使用img/clip技术http://css-tricks.com/css-sprites-with-inline-images/,它将在IE9中为你提供图像和FF(虽然不是IE8) (5认同)
- 在普通浏览器中运行良好,但在IE中则不行,即使有@evami的建议. (2认同)
- 真棒黑客,你必须做一个关于此的博客文章 (2认同)
- 这似乎不适用于最新的 Chrome (60)。 (2认同)
MAX*_*AXE 34
试试这个,它在Google Chrome上对我有用:
<style media="print" type="text/css">
.page {
background-color: white !important;
}
</style>
Bas*_*ANI 21
-webkit-print-color-adjust: exact; 单独is Not enough
你必须使用!important属性
这是在我添加!important到每个标签中的每个background-color和colorattrubute 后在chrome上打印预览
这是在添加之前在chrome上打印预览!important
现在,要知道如何使用inject !importantdiv的风格,看看这个答案,我无法注入一个带有"!important"规则的样式
yar*_*ar1 10
两种有效的解决方案(至少在现代Chrome上 - 尚未测试过):
- !常规css声明中的重要权利(甚至不在@media打印中)
- 使用svg
- !important解决了每个现代浏览器中的问题,只要启用"打印背景颜色和图像"即可. (6认同)
- 如果您将主体与主体{-webkit-print-color-adjust：exact;一起使用，也可以在没有用户干预的情况下使用！important。}（根据上面的评论） (2认同)
- 我发现如果我使用`color-adjust`或webkit变体，我实际上不需要重要的规则。 (2认同)
如果不激活其他帖子中提到的打印边框选项,您还可以执行其他操作.由于打印了边框,您可以使用此黑客模拟纯色背景颜色:
.your-background:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: -1;
border-bottom: 1000px solid #eee; /* Make it fit your needs */
}
通过将类添加到元素来激活它:
<table>
<tr>
<td class="your-background"> </td>
<td class="your-background"> </td>
<td class="your-background"> </td>
</tr>
</table>
虽然这需要一些额外的代码和一些额外的关注使背景颜色可见,但它仍然是我所知道的唯一解决方案.
请注意,此hack不会对除display: block;or 之外的元素起作用display: table-cell;,因此例如<table class="your-background">并且<tr class="your-background">不起作用.
我们使用它来获取所有浏览器的背景颜色(仍然需要IE9 +).
小智 6
如果您要创建"打印机友好"页面,我建议您在@media print CSS中添加"!important".这鼓励大多数浏览器打印背景图像,颜色等.
例子:
background:#3F6CAF url('example.png') no-repeat top left !important;
background-color: #3F6CAF !important;
尽管!important使用通常不受欢迎，但这是bootstrap.css防止表行被打印的有问题的代码background-color。
.table td,
.table th {
background-color: #fff !important;
}
假设您正在尝试设置以下 HTML 的样式：
<table class="table">
<tr class="highlighted">
<td>Name</td>
<td>School</td>
<td>Height</td>
<td>Weight</td>
</tr>
</table>
要覆盖此 CSS，请在样式表中放置以下（更具体的）规则：
@media print {
table tr.highlighted > td {
background-color: rgba(247, 202, 24, 0.3) !important;
}
}
这是有效的，因为规则比引导默认值更具体。
我刚刚将这段代码添加到印刷媒体查询中，并且所有样式均按预期应用：
* {
color-adjust: exact!important;
-webkit-print-color-adjust: exact!important;
print-color-adjust: exact!important;
}
小智 5
对于chrome,我使用过这样的东西,它对我有用.
在body标签内,
<body style="-webkit-print-color-adjust: exact;"> </body>
或者对于一个特定的元素,假设你有桌子而你想要填充td即一个单元格,
<table><tr><td style="-webkit-print-color-adjust: exact;"></tr></table>