html清除div背景,Bootstrap打印CSS删除背景颜色

Vino..

34

不幸的是,你的问题没有一个好的答案 - 但也许如果你理解为什么那么你就可以选择前进的方向.

为什么？

Bootstrap确实使用了@media print { * { color: $fff; background: transparent; }}- 但是有一个非常可靠的原因.这段代码实际上来自normalizer.css项目(由当时的@mdo大学,@ necolas) - 它的目的是使所有浏览器的行为相同.这些家伙选择"正常化"css是有充分理由的:

对于大多数浏览器,可以选择包含或排除背景颜色,因此即使在同一浏览器中,行为也不是标准的.想象一下,一个背景非常暗的白色文本的网站 - 当关闭背景打印时,看起来你什么都不打印 - 实际上你在没有(白色)背景上打印白色文字.

没有办法考虑到颜色的所有不同用途,因此他们选择黑色(字体)和白色(背景,实际上是"透明").甚至黑色的选择也被充分考虑 - 它是一种更好的打印解决方案,因为大多数彩色打印机都有更多的黑色"墨水/墨粉"(更经济),并且它们不需要混合颜色来制作黑色(如此之快).

请记住,Bootstrap也是一个"框架" - 如果你愿意的话,这是一个起点 - 并且赞扬@mdo和@necolas在建立可预测的基线方面有先见之明的想法. (不,我不认识他们.)

不...

因此,这里的想法是:"如果我们可以'回去’什么,并没有设置这个不幸的是CSS不喜欢的工作 - 是浏览器加载CSS声明的'队列’里的最后声明者胜(LIFO或后进-first-out),但我不知道有什么方法可以删除这个堆栈.所以CSS开发人员只需添加更多内容......

所以我们可以假设我们可以回去那样 - 添加一个* { background-color: inherit }.问题是inherit恢复到父属性,但是*是根,因此没有任何内容可以恢复.同样的initial!

也许!

所以我们留下了4个选项,它们都不是你所希望的,但它就是它的本质.按难度顺序:

下载BS(less或sass)源代码,编辑有问题的代码,然后进行编译.(您需要使用本地副本,CDN将无法使用.)

下载您选择的CSS变体,搜索并删除有问题的代码.(再没有CDN.)

使用getbootstrap.com/customize创建新变体 - 排除"Common CSS"下的"Print media styles".(再次,没有CDN的)

覆盖要打印颜色的特定项目:例如

@media print {

.alert-danger {

color: yellow !important;

background-color: red !important;

}

}

CDN的BS副本现在可以使用了,但是你遇到的问题是用户可能不打印背景并且输出白色(例如黄色)白色!

最后

好吧,我希望了解为什么至少是一种思考解决方法的方法.我遵循的一般经验法则是,在打印时,背景(应该)始终是白色.当你受限于这种方式时,你开始考虑新颖的想法,比如文本周围的感叹号只有"打印"(@media only screen { .hidden-screen { display: none; }})