twitter-bootstrap CSS/SCSS/bootstrap :: 覆盖引导程序中的打印设置 :: 更改背景：透明！对颜色很重要
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15658449/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS/SCSS/bootstrap :: override print settings in bootstrap :: change background:transparent ! important to a color
提问by jabbawock
I have a problem with the bootstrap CSS/print.
我的引导程序 CSS/打印有问题。
In bootstrap CSS (reset.css) everything is cleared for printing
在引导 CSS (reset.css) 中，所有内容都被清除以进行打印
@media print {
* {
text-shadow: none !important;
color: black !important;
background: transparent !important;
box-shadow: none !important;
}
}
But I have to print several lines in color. My table looks like this:
但我必须用彩色打印几行。我的桌子看起来像这样：
<div class="container">
<div id="task-summary">
<div id="process-summary">
<table class="table table-condensed">
<tbody>
<tr class="success">
<td>
I embeded this into my code, but it does not work:
我将此嵌入到我的代码中，但它不起作用：
@media print {
#task-summary{
.success{
background-color: #DFF0D7 !important;
}
}
}
I've already tried if the css is excepted by using display: none .. it works (line is not displayed) and seems to be on the right place.
如果使用 display: none ..
Does someone have an idea how I can manage to override the bootstrap css command, without editing the reset.css of bootstrap?
有人知道如何在不编辑 bootstrap 的 reset.css 的情况下覆盖 bootstrap css 命令吗？
回答by phylib
I had the same problem. When you print the page the background-color: ...;option doesn't work at table rows. Change the CSS-Selector to:
我有同样的问题。当您打印页面时，该background-color: ...;选项不适用于表格行。将 CSS 选择器更改为：
@media print {
#task-summary .success td {
background-color: #DFF0D7 !important;
/* add this line for better support in chrome */
-webkit-print-color-adjust:exact;
}
}
Everything should work after this changes.
在此更改后，一切都应该正常工作。
回答by GaryP
@media print {
.success {
background-color: #DFF0D7 !important;
}
}
Or
或者
@media print {
#task-summary .success {
background-color: #DFF0D7 !important;
}
}
Or
或者
@media print {
#task-summary > #process-summary .success {
background-color: #DFF0D7;
}
}
