如何在不使用背景色的情况下用颜色填充 div？答案

【问题标题】：How can I fill a div with color without using background-color?如何在不使用背景色的情况下用颜色填充 div？
【发布时间】：2019-07-31 17:28:03
【问题描述】：

我有一个 Web 应用程序，我试图在其中打印某些信息。我将 Telerik KendoUI 用于网格和其他控件。

我现在要做的是弹出一个带有打印内容的 Kendo 窗口，将其设为模态，然后将模态背景设置为不透明的白色，以便覆盖其他所有内容。这个想法是，当用户打印时，它只会看到窗口内容。

问题在于，默认情况下，浏览器不打印背景。这意味着，当它打印时，您仍然可以看到窗口下的所有其他内容，甚至窗口本身也是透明的，因为它自己的背景不包括在内。

如果用户进入浏览器的打印设置，并检查“打印背景”，那么它工作正常。但是，我们不能指望我们的用户这样做，我们需要让它“开箱即用”。

我尝试了 StackOverflow 的几种打印解决方案，其中大部分涉及弹出一个新窗口，替换其内部 HTML 内容，然后打印它。我一直遇到的问题是我的 CSS 不适用于那些，即使在手动放入 HTML 以包含 CSS 之后也是如此。我可以看到 CSS 文件被正确请求并且没有错误地接收，但它们仍然不适用于窗口内容。

        $scope.printDiv = function (contentDiv) {
            var printWinWrapper = $("#caseDetailPrint");
            printWinWrapper[0].innerHTML = contentDiv.innerHTML;
            var printWin = printWinWrapper.kendoWindow({
                title: "Print",
                modal: true,
                scrollable: false,
                minWidth: "1000",
                position: {
                    top: 0,
                    left: 0
                },
                close: function(e) {
                    $(".k-overlay").css('background-color', 'black');
                    $(".k-overlay").css('opacity', 0.5);
                }
            }).data("kendoWindow");
            printWin.open();
            printWinWrapper.parent().addClass("print-window-titlebar");
            $(".k-overlay").css('background-color', 'white');
            $(".k-overlay").css('opacity', 1);
            window.print();
        };

所以我在想，如果我可以使用除“background-color” CSS 之外的某种方法来设置“.k-overlay”（这是 Kendo 隐藏模式背后的东西的方式）的颜色，那应该强制它在该窗口打开时隐藏页面的其余内容。

有什么想法吗？

编辑：我尝试了 box-shadow（感谢 h.sh），无论我是否选择了“打印背景和图像”，它实际上都被忽略了。所以看起来我需要修改我的请求，只包括允许它在“打印背景和图像”关闭的情况下可打印的解决方案，这是我们所针对的浏览器的默认设置（IE11，不，我们可以'不要改变它）。

【问题讨论】：

巨型插图box-shadow?但不确定如何打印。
画布元素有帮助吗？ (developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/…)
使用@media print 并将css样式设置为只显示可以打印的内容。
取决于你的结构，它可能是 @media print { body * {display:none;} .popup, .popup * {display:initial;} } initial is not supported by IE11 but :not() should be . 对 cmets 的反馈也很感激

标签： javascript html css kendo-ui

【解决方案1】：

这是一个不使用背景色改变颜色的例子，你可以自定义它。

我用过内阴影

box-shadow: inset -1px -1px 100px   100px black;

.bg{
  width:100px;
  height:100px;
  color:#eee;
  box-shadow: inset -1px -1px 100px   100px black;

}

<div class="bg">
test
</div>

【讨论】：

我刚刚试过了，box-shadow 也没有打印出来，或者出现在打印预览中。不幸的是，“打印背景和图像”是否被选中是不可见的。

【解决方案2】：

如果你可以使用背景图片试试：

.bg{
  width:100px;
  height:100px;
  color:#eee;
  background:url('data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=');
}

&lt;div class="bg"&gt;test&lt;/div&gt;

【讨论】：

刚试了一下，默认不打印，我想是因为它是本例不打印的“背景”的一部分。