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

Question

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

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

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

如果用户转到浏览器的“打印”设置并选中“打印背景”，则它可以正常工作。但是，我们不能期望我们的用户这样做，我们需要让它“开箱即用”。

我尝试了 StackOverflow 的几种打印解决方案，其中大部分涉及弹出一个新窗口，替换其 innerHTML 内容，然后打印它。我一直遇到的问题是我的 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();
        };

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

有什么想法吗？

编辑:我尝试了 box-shadow(感谢 h.sh)，实际上忽略了我是否选择了“打印背景和图像”。所以看起来我需要修改我的请求以仅包含允许它在关闭“打印背景和图像”的情况下打印的解决方案，这是我们目标浏览器的默认设置(IE11，不，我们不能'不要改变它)。

Answer 1

这是一个不使用background-color改变颜色的例子，你可以自定义。

我用过内阴影

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>