在Twitter Bootstrap CSS中覆盖`background：transparent！important`
[英]Override `background: transparent !important` in Twitter Bootstrap CSS
问题描述
Have an application that draws div s with background color as its graphics. 
有一个应用程序，以背景颜色绘制div作为其图形。
These divs appear fine on screen but the div s disappear when printing to PDF. 这些div在屏幕上看起来很好但是打印到PDF时div消失。
Traced the problem to Twitter Bootstrap CSS. 将问题追溯到Twitter Bootstrap CSS。 The divs print fine when Bootstrap CSS is not present. 当Bootstrap CSS不存在时，div打印正常。 But don't print when it is. 但是不要打印。 See this JSFiddle: 看到这个JSFiddle：
http://jsfiddle.net/VYg9s/ http://jsfiddle.net/VYg9s/
I think the problem is this section of Twitter CSS. 我认为问题是Twitter CSS的这一部分。 I think I need to override the background: transparent !important but can't for the life of me figure out how. 我想我需要覆盖background: transparent !important但不能为我的生活弄清楚如何。
This is presumably simple. 这可能很简单。 Tried background: opaque !important but that didn't work, and I can't seem to find a list of allowable values for the background property. 尝试过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; background: transparent !important;的反面是什么background: transparent !important; in CSS? 在CSS？
2 个解决方案
解决方案1
8 已采纳 2013-12-12 03:39:49
The opposite of background: transparent !important; background: transparent !important;的反面background: transparent !important; is background: color hex code !important; 是background: color hex code !important;
"color hex code" can be any CSS acceptable color code type; “颜色十六进制代码”可以是任何CSS可接受的颜色代码类型; like rgb, rgba, hexadecimal, etc. 像rgb，rgba，十六进制等
解决方案2
-1 2015-05-04 12:48:47
To keep the bootstrap.css untouched this is a way to win the 'who overwriting css slam' by inject media print css with jquery at bottom of head ... 为了保持bootstrap.css不受影响，这是一种通过在头部底部 注入媒体打印css和jquery赢得'谁覆盖css slam'的方法...
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.