Html 可靠地创建重复的线性渐变图案

我创建了一个元素，它使用

重复线性渐变

作为背景图像。此时，元素的大小会对背景图案产生不利影响。我的目标是，无论元素大小如何，都能始终如一地生成相同的背景图案

我知道每次获取此模式的最简单方法是创建一个.png，其中包含可以重复的模式，但是在没有图像的情况下，是否仍可以创建此模式？传统浏览器兼容性不是问题

我只是在寻找我可能没有想到的解决这个实验的建议

为了演示，我创建了这个

HTML

---

为

.bar

设置

背景大小：

background-size: 695px 44px;

为
.bar
设置
背景大小：

background-size: 695px 44px;

谢谢！再加上分层的颜色停止解决了我的问题。我已经用最终结果更新了原始代码笔。谢谢！再加上分层的颜色停止解决了我的问题。我已经用最终结果更新了原始代码笔。
background-size: 695px 44px;