当我使用引导程序时,它会在尝试打印页面时从所有内容中消除背景色。我网站上的几乎所有东西都使用bootstrap类,因此我想避免在bootstrap外使用大量手动CSS。我发现引导程序用于@media print删除背景色。我也使用了引导主题(主题统一),它也删除了背景色。
@media print
theme-united.css
@media print *, *:before, *:after { background: rgba(0, 0, 0, 0) !important; color: rgb(0, 0, 0) !important; -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important;
bootstrap.min.css
@media print *, :after, :before { color: rgb(0, 0, 0)!important; text-shadow: none!important; background: 0 0!important; -webkit-box-shadow: none!important; box-shadow: none!important;
有没有一种方法可以确保在不编辑这2个CSS文件的情况下进行打印时不去除背景色?
例如:当我使用.alert-danger时,我希望打印警告警报,因为它显示在屏幕上,因此将其打印为红色框。
不幸的是,您的问题没有很好的答案-但是也许,如果您了解原因,那么您可以选择前进的道路。
为什么?
Bootstrap确实使用@media print { * { color: $fff; background: transparent; }}-,但这是有充分理由的。这段代码实际上是从normalizer.css项目派生的(当时是@mdo的学院,@ necolas)–目的是使所有浏览器的行为相同。这些人出于非常充分的理由选择对CSS进行“标准化”:
@media print { * { color: $fff; background: transparent; }}
在大多数浏览器中,可以选择包含或排除背景色,因此即使在同一浏览器中,行为也不是标准的。想象一下,一个网站背景非常暗且带有白色文本的网站- 在不带背景的情况下打印时,看起来好像您什么都没打印-在实际上您是在无(白色)背景上打印白色文本时。
无法说明所有不同的颜色用途,因此他们选择使用黑色(字体)和白色(背景,实际上是“透明”)。甚至选择黑色也是经过深思熟虑的,它是一种更好的打印解决方案,因为大多数彩色打印机都具有更多的黑色“墨水/墨粉”(更经济),并且它们无需混合颜色即可制成黑色(速度更快)。
请记住,Bootstrap也是一个“框架”-如果您愿意的话,也是一个起点- 并对@mdo和@necolas表示敬意,因为他们具有远见卓识,可以建立可预测的基准。 (不,我不认识他们。)
不…
因此,这里的想法是:“如果我们可以’返回’并取消设置,该怎么办。不幸的是CSS不能那样工作- 是的,浏览器将CSS声明加载到最后一个声明获胜的“队列”中(LIFO或last-in -first- out),但我不知道删除此堆栈的方法,因此CSS开发人员只会在最后添加更多内容…
因此,有人会假设我们可以回去—添加一个* { background-color: inherit }。问题是inherit还原到父属性,但*它是根,因此没有任何要还原的属性。一样initial!
* { background-color: inherit }
inherit
*
initial
也许!
因此,我们剩下4个选项,它们都不是您所希望的,但事实就是如此。按难度顺序:
@media print { .alert-danger { color: yellow !important; background-color: red !important; } }
CDN的BS副本现在可以使用,但是您遇到的问题是,用户可能无法打印背景,并且输出白色(例如,黄色)在白色上!
最后
好吧,我希望至少知道为什么会这样,这是您思考变通办法的一种方式。我遵循的一般经验法则是,在打印时,背景总是(应该是)白色。受到这种限制后,您便开始思考新颖的想法,例如仅“打印”(@mediaonly screen { .hidden-screen { display: none; }})的文字周围的感叹号图标
@mediaonly screen { .hidden-screen { display: none; }}