在 Google Chrome 中另存为 PDF 时不会出现重复线性渐变

问题描述

我目前正在处理我的简历，并试图在它上面添加一些由线条组成的整洁的圆圈。

所以我使用了一个重复线性渐变，它的工作原理就像当你按下 CTRL + P 时它会显示在浏览器和打印屏幕上一样，但是当你将它实际保存为 PDF 时，圆圈不会出现在 PDF 文件中。

我已经在 Google Chrome、Firefox、Microsoft Edge 上尝试过这个，但这些浏览器都不起作用。

我只是想知道是不是我做错了什么，或者是否有解决办法。

下面是我如何设置一个示例供您测试，我只是在 HTML 中创建了一个 div，并在 CSS 中对其应用了一些类。自己尝试一下，看看是否可以得到由线条组成的圆圈以保存为 PDF。如果您能帮我解决这个问题，我将不胜感激。

<!DOCTYPE html>
<html lang="en">
    <head>
        <Meta charset="UTF-8">
        <Meta http-equiv="X-UA-Compatible" content="IE=edge">
        <Meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Striped Circle</title>

        <style>
            .circle {
                position: absolute;
                width: 300px;
                height: 300px;
                border-radius: 50%;
            }

            .circle-1 { /* Top Left */
                background-color: transparent;
                background-image: repeating-linear-gradient(135deg,#333 0 4px,/* [color] [start-point] [end-point] */
                transparent 4px 10px);
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
        <div class="circle circle-1"></div>
    </body>
</html>

解决方法

是否打印背景是浏览器中的一个选项。

选择打印并保存为 PDF 后，选择更多设置并选择背景图形。然后，您应该可以看到带条纹的圆圈。

html pdf pdf pdf repeating-linear-gradient