不幸的是,您的问题没有一个好的答案 - 但也许如果您了解原因,那么您可以选择前进的方向。
Why?
Bootstrap 确实使用了@media print { * { color: $fff; background: transparent; }}
——但是有一个非常充分的理由。这段代码实际上是源自标准化.css https://github.com/necolas/normalize.css项目(由当时的 @mdo 学院、@necolas 发起) - 其目的是使所有浏览器的行为相同。这些人选择“规范化”CSS 有一个很好的理由:
对于大多数浏览器,人们可以选择包含或排除背景颜色,因此即使在同一浏览器中,这种行为也不是标准的。想象一下一个具有非常暗的背景和白色文本的网站 - 当在关闭背景的情况下打印时,它看起来就像你没有打印任何东西 - 而实际上你是在没有(白色)背景上打印白色文本。
无法解释颜色的所有不同用途,因此他们选择黑色(字体)和白色(背景,实际上是“透明”)。甚至黑色的选择也经过深思熟虑——它是更好的打印解决方案,因为大多数彩色打印机有更多的黑色“墨水/碳粉”(更经济),并且它们不需要混合颜色来变成黑色(所以更快)。
请记住,Bootstrap 也是一个“框架” - 如果您愿意的话,可以作为一个起点 - 并且感谢 @mdo 和 @necolas,他们有先见之明,在建立可预测的基线方面考虑了这一点。(不,我不认识他们。)
Nope...
所以这里的想法是:“如果我们可以‘返回’并取消设置它会怎么样。不幸的是,CSS 不是这样工作的 - 是的,浏览器将 CSS 声明加载到“队列”中,其中最后一个声明获胜(LIFO,或后进) -first-out),但我不知道如何删除这个堆栈。所以 CSS 开发人员只需在末尾添加更多内容......
因此,人们会假设我们可以按照这种方式返回——添加一个* { background-color: inherit }
。问题是inherit
恢复到父属性,但是*
是根,所以它没有什么可恢复的。同样适用于initial
!
Maybe!
所以我们只剩下 4 个选择,没有一个是你所希望的,但它就是这样。按难度顺序:
- 下载 BS(less 或 sass)源代码,编辑有问题的代码,然后编译它。 (您需要使用本地副本,CDN 不起作用。)
- 下载您选择的 CSS 变体,搜索并删除有问题的代码。 (又没有 CDN。)
- Use getbootstrap.com/customize http://getbootstrap.com/customize/要创建新变体 - 排除“通用 CSS”下的“打印媒体样式”。 (再次强调,没有 CDN)
- 覆盖您要打印的颜色的特定项目:例如
@media print {
.alert-danger {
color: yellow !important;
background-color: red !important;
}
}
CDN 的 BS 副本现在可以工作,但是您会遇到用户可能不打印背景并在白色上输出白色(例如黄色)的问题!
Finally
好吧,我希望了解原因至少是您思考解决方法的一种方式。我遵循的一般经验法则是,打印时,背景(应该)始终是白色的。当受到这种限制时,您开始思考新颖的想法,例如文本周围仅“打印”的感叹号图标(@media only screen { .hidden-screen { display: none; }}
)