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

Question

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

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

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

如果用户转到浏览器的“打印”设置，然后选中“打印背景”，则可以正常工作。 但是，我们不能指望用户会这样做，因此我们需要使其“开箱即用”地工作。

我尝试了StackOverflow的几种打印解决方案，其中大多数涉及弹出一个新窗口，替换其innerHTML内容，然后进行打印。 我一直遇到的问题是，即使手动插入HTML以包含CSS，我的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();
        };

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

有任何想法吗？

编辑：我尝试了阴影（感谢h.sh），实际上是否忽略了我是否选择了“打印背景和图像”。 因此，看来我需要修改我的请求，以仅包含允许其在“打印背景和图像”关闭的情况下可打印的解决方案，这是我们定位的浏览器的默认设置（IE11，不，我们可以改变它）。

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>