Override `background: transparent !important` in T

2020-03-17 07:01发布

站内问答 / HTML/CSS
490 2 6

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.

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:

http://jsfiddle.net/VYg9s/

I think the problem is this section of Twitter CSS. I think I need to override the background: transparent !important but can't for the life of me figure out how.

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.

@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?

2条回答
闹够了就滚
2楼-- · 2020-03-17 07:27

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

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

查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
3楼-- · 2020-03-17 07:37

The opposite of background: transparent !important; is background: color hex code !important;

"color hex code" can be any CSS acceptable color code type; like rgb, rgba, hexadecimal, etc.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)