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

Question

我有一个Web应用程序，我正在尝试打印某些信息。我正在使用Telerik Kendoui进行网格和其他控件。

我现在正在做的是，我弹出了带有打印内容的Kendo窗口，制作模式，然后制作模态背景不透明白色，因此它覆盖了其他所有内容。这个想法是，当用户打印时，它将仅看到窗口内容。

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

如果用户转到浏览器的打印设置，并检查"打印背景"，则可以正常工作。但是，我们不能指望我们的用户这样做，我们需要使其"开箱即用"。

我尝试了来自Stackoverflow的几种解决方案来打印，其中大多数涉及弹出一个新窗口，更换其InnerHTML内容，然后打印。我一直遇到的问题是，即使手动放入HTML以包括CSS之后，我的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隐藏东西后面的东西(，那应该强迫它在该窗口启动时，隐藏页面内容的其余部分。

有什么想法吗？

编辑：我尝试了盒子阴影(感谢H.SH(，实际上是否忽略了我是否选择了"打印背景和图像"。因此，看来我需要修改我的请求，以仅包含可以使用"打印背景和图像"打印的解决方案，这是我们针对的浏览器的默认值(IE11，不，我们可以'T更改它(。

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

Answer 2

如果可以使用背景图像，请尝试：

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

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