Override `background: transparent !important` in Twitter Bootstrap CSS

前端未结

关注

 2  1236

Have an application that draws divs with background color as its graphics.
These divs appear fine on screen but the divs disappear when printin

相关标签:

2条回答

眼角桃花

2021-01-12 10:21

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)
发布评论:

提交评论
- 加载中...

南方客

2021-01-12 10:23

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)