Question

让应用程序以背景颜色绘制div s作为其图形这些div在屏幕上显示正常，但打印到PDF时div消失。

将问题追溯到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;的反义词是什么？

Answer 1

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

“颜色十六进制代码”可以是任何CSS可接受的颜色代码类型;比如rgb，rgba，hexadecimal等。

Answer 2

为了保持bootstrap.css不受影响，这是一种赢得覆盖css slam＆＃39;通过注入媒体印刷css 与 jquery 在头部 ...

＆＃13;

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

＆＃13;

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

2 个答案: