在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

回答

相關問題