[英]CSS/SCSS/bootstrap :: override print settings in bootstrap :: change background:transparent ! important to a color
I have a problem with the bootstrap CSS/print. 我有一个bootstrap CSS / print的问题。
In bootstrap CSS (reset.css) everything is cleared for printing 在bootstrap 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来排除css ..它可以正常工作(行不显示)并且似乎在正确的位置。
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命令吗?
I had the same problem. 我有同样的问题。 When you print the page the
background-color: ...;
当你打印页面
background-color: ...;
option doesn't work at table rows. 选项在表行中不起作用。 Change the CSS-Selector to:
将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. 在这种变化之后,一切都应该有效。
@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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.