在Twitter上覆盖`background：transparent！important` Bootstrap CSS

有一个应用程序将div作为其图形绘制为背景色。
这些div在屏幕上显示正常，但div在打印到PDF时消失。在Twitter上覆盖`background：transparent！important` Bootstrap CSS

将问题追溯到Twitter Bootstrap CSS。 Bootstrap CSS不存在时，div可以正常打印。但不要打印时间。看到这个的jsfiddle：

我认为这个问题是Twitter的CSS的这个部分。我认为我需要覆盖background: transparent !important，但不能为我的生活弄清楚如何。

这大概很简单。试过background: opaque !important，但没有奏效，我似乎无法找到background属性的允许值列表。

@media print { 
    * { 
    color: #000 !important; 
    text-shadow: none !important; 
    background: transparent !important; 
    box-shadow: none !important; 
    }

什么的CSS background: transparent !important;相反？

来源

2013-12-12 prototype

的background: transparent !important;相对的是background: color hex code !important;

“颜色十六进制代码”可以是任何可接受的CSS颜色代码类型;像RGB，RGBA，十六进制等

来源

2013-12-12 03:39:49 DrCord

为什么会这样值得-1，这是正确的，我遇到了麻烦格式它在移动，但它现在是很好.. – DrCord

（-1 WA不是从我的OP。）谢谢，这工作！ *但*实际的应用程序有很多不同的颜色，由于Bootstrap的透明度指令而消失。我能做的事情是为每一个添加颜色。而Twitter的CSS在全球范围内增加了透明度。可能有办法将它们设置为全球不透明吗？ – prototype

@ user645715如果你不想让Bootstrap完成它，你应该从bootstrap.css文件中删除它:) – Ming

-1

为了保持bootstrap.css不变，这是取胜的方式“谁覆盖CSS大满贯”由注入介质打印的CSS与jQuery的在底部头的...

<!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>

来源

2015-05-04 12:48:47 iqmeta

在Twitter上覆盖`background：transparent！important` Bootstrap CSS

回答

相关问题