twitter-bootstrap 在 Twitter Bootstrap CSS 中覆盖 `background: transparent !important`
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20534548/
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
Override `background: transparent !important` in Twitter Bootstrap CSS
提问by prototype
Have an application that draws divs with background color as its graphics.
These divs appear fine on screen but the divs disappear when printing to PDF.
有一个应用程序div以背景颜色作为图形绘制s。
这些 div 在屏幕上显示良好，但div在打印为 PDF 时 s 消失了。
Traced the problem to Twitter Bootstrap CSS. The divs print fine when Bootstrap CSS is not present. But don't print when it is. See this JSFiddle:
将问题追溯到 Twitter Bootstrap CSS。当 Bootstrap CSS 不存在时，div 打印正常。但是不要在打印时打印。看到这个 JSFiddle：
I think the problem is this section of Twitter CSS. I thinkI need to override the background: transparent !importantbut can't for the life of me figure out how.
我认为问题在于 Twitter CSS 的这一部分。我想我需要覆盖background: transparent !important但不能为我的生活弄清楚如何。
This is presumably simple. Tried background: opaque !importantbut that didn't work, and I can't seem to find a list of allowable values for the backgroundproperty.
这想必很简单。尝试过background: opaque !important但没有奏效，而且我似乎无法找到该background属性的允许值列表。
@media print {
* {
color: #000 !important;
text-shadow: none !important;
background: transparent !important;
box-shadow: none !important;
}
What's the opposite of background: transparent !important;in CSS?
background: transparent !important;CSS 中的反义词是什么？
回答by DrCord
The opposite of background: transparent !important;is background: color hex code !important;
相反的background: transparent !important;是background: color hex code !important;
"color hex code" can be any CSS acceptable color code type; like rgb, rgba, hexadecimal, etc.
“颜色十六进制代码”可以是任何 CSS 可接受的颜色代码类型；如 rgb、rgba、十六进制等。
回答by iqmeta
To keep the bootstrap.css untouched this is a way to win the 'who overwriting css slam' by inject media print csswith jqueryat bottom of head...
为了保持 bootstrap.css 不变，这是一种通过在头部底部注入带有jquery 的媒体打印 css来赢得“谁覆盖 css 猛击”的方法......
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>CssTest</title>
<link href="/libs/dev/bootstrap/bootstrap.min.css" rel="stylesheet" />
<script src="/libs/dev/common.js"></script>
</head>
<body>
<button>Test Change / Add Dynamic</button><br />
<br />
<div id="test1" style="background-color: red; display: block; width: 500px; height: 100px">
HELLO
</div>
<div id="test2" style="background-color: green; display: block; width: 500px; height: 100px">
HELLO
</div>
<div id="test3" style="background-color: orange; display: block; width: 500px; height: 100px">
HELLO
</div>
<script>
var app = {};
app.updatePrintCSS = function (items) {
$("[data-role='printAdded']").remove();
$(items).each(function (i, e) {
var data = "@@media print{#" + $(e).attr("id") + "{ background-color: " + $(e).css("background-color") + " !important; }}";
$("<style data-role='printAdded'></style>").appendTo("head").html(data);
});
}
$(function () {
app.updatePrintCSS($("div"));
$("button").on("click", function (e) {
$("#test3").css("background-color", "#FF69B4 !important");
$("body").append($('<div id="test4" style="background-color: blue; display: block; width: 500px; height: 100px" >HELLO</div>'));
app.updatePrintCSS($('div'));
});
});
</script>
</body>
</html> 