如何使用background-image: fixed CSS属性打印背景？

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在运行。我不想发布完整的代码，因为它有个人信息，但如果它是绝对必要的，我可以拿出所有的东西，并留下布局和样式。我做了一个fiddle here，有趣的是，如果我尝试打印页面，我可以看到渐变背景……以下是一些屏幕截图：printing my resume vs viewing my resume in browser。当我尝试打印小提琴时，我看到的是Here (这正是我想要的！我很确定我可以用更多的webkit-print东西得到米色的背景)。

我将试用WkHTMLtoPDF，并报告它的工作原理。

编辑2: WkHTMLtoPDF也不适合我。我得到了一个“未知错误”，退出代码为1。我继续使用JS和background-position的建议，而且效果很好！我删除了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在这方面已经做了很长时间。