Question

我一直在进行大量搜索，但找不到任何人问这个问题。我正在尝试用HTML编写样式良好的简历（并将其打印为PDF），并用CSS背景突出显示了一些内容。通过在Chrome中选择正确的打印选项，我可以保留大多数背景。

但是，有一个背景我无法打印。我希望多个

标签共享相同的渐变背景，所以我找到了一种解决方案（详细here），该解决方案在每个

元素上使用以下CSS样式：

.skill{
            white-space: nowrap;

            /* Gradient background */
            border-radius: 5px;
            padding: 2px 5px;
            background-image: linear-gradient(to right, hsl(120, 60%, 75%), hsl(120, 33%, 90%));
            background-attachment: fixed;
            background-size: 100%;

            -webkit-print-color-adjust: exact;
        }

即使使用-webkit-print-color-adjust，Chrome也不会显示这些背景。如果我将background-attachment设置为其他任何值，它将显示在打印中，但不再具有我想要的外观。

有任何解决方法的想法吗？我不在乎与任何特定浏览器的兼容性，我只想能够将其打印为PDF！

编辑：感谢您的快速回复！为了清楚起见，我的页面没有运行任何javaScript，只有HTML和CSS。我不想发布完整的代码，因为它包含个人信息，但是如果绝对必要，我可以删除所有内容，并保留布局和样式。我做了一个小提琴here，很有趣的是，如果尝试打印页面，我可以看到渐变背景...下面是一些屏幕截图：printing my resume vs viewing my resume in browser。 Here是我尝试打印小提琴时看到的（这就是我想要的！我很确定我可以用更多的webkit打印的东西得到米色的背景）。

将试用WkHTMLtoPDF并报告其工作原理。

编辑2：WkHTMLtoPDF也不适合我。我收到退出代码1的“未知错误”。我继续建议仅使用JS和背景位置，并且效果很好！我删除了background-attachment属性，并使用了以下JS：

window.onload = function(){
            var skills = document.getElementsByClassName("skill");
            Array.from(skills).forEach(function(item, index){
                item.setAttribute("style", "background-position: -" + item.offsetLeft + "px -" + item.offsetTop + "px");
            })
        };

虽然可能不是最优雅的解决方案，但我不介意，因为我为自己做的比什么都重要。任何非JS解决方案也都很棒，但这对我来说已经足够了。谢谢大家！

Answer 1

background-attachment: fixed（docs）应该将背景保持在特定的位置，即使您在其顶部滚动。显然，在打印中，您不能滚动元素...

相反，我将其删除并使用background-position: top left;（或您希望它出现在任何其他位置）。如果您习惯了特定位置显示的背景，则可能还需要设置background-repeat: no-repeat;。

此外，如果您在打印渲染器中遇到问题（在这种情况下，没有装饰（例如渐变）的简单材质可能会更好），您可以查看库来进行这种转换。 WkHTMLtoPDF已经这样做很久了。

如何使用background-image：固定CSS属性打印背景？

1 个答案: