如何实现带间隙的重复背景图像？（信纸样式需求）

当然可以，你可以通过自定义SVG背景图结合CSS属性实现重复图像间的间隙，同时解决repeating-linear-gradient带来的亚像素渲染问题。

问题分析 #

你尝试的线性渐变方案在窗口较小时线条变淡，本质是亚像素渲染导致的：当渐变的起止位置计算后落在像素边界之间，浏览器会进行半透明插值，让线条看起来模糊。

解决方案 #

CSS 配置 #

通过指定SVG背景图，并设置background-size为1.5em 1.5em，让背景在垂直方向每1.5em重复一次，刚好实现线条间的间隙，水平方向则自动铺满容器：

h1,
h2 {
    font-size: clamp(6.4rem, 4vw, 8rem);
    line-height: 1.5em;
    background-image: url("images/lines.svg");
    background-size: 1.5em 1.5em;
}

SVG 细节优化 #

为了保证线条在缩放时始终保持1px宽度，你制作的SVG加入了vector-effect="non-scaling-stroke"属性，同时设置了合适的 viewBox和尺寸：

<svg enable-background="new 0 0 120 120" viewBox="0 0 120 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
    <path d="m0 119h120" fill="none" stroke="#000" stroke-width="1px" vector-effect="non-scaling-stroke"/>
</svg>

这里的120px×120px尺寸是基于最大字体尺寸（8rem=80px）乘以1.5计算而来，确保SVG在最大缩放比例下也能完整显示线条，避免裁剪。

内容的提问来源于stack exchange，提问作者user2991837