问题描述
我正在开发一个需要有条纹背景的用户界面，它也可以通过用户拖动其底部边缘来调整大小.
我已经使用repeating-linear-gradient实现了条纹背景，它本身就工作得很好.但是，当元素从其底部边缘调整大小时，整个背景会随之移动，而不是固定在顶部边缘.
我希望渐变锚定到顶部边缘，这样当元素以这种方式调整大小时，它看起来像是随着元素扩展，而不是移动.
最小可重复性示例
这只是一个警告，这个例子包含的移动可能会分散注意力.但有必要证明这个问题.
html, body {
margin: 0;
height: 100%;
}
@keyframes changeHeight {
100% { height: 100%; }
}
.example {
width: 100%;
height: 50%;
background-image: repeating-linear-gradient(-45deg, #ccc 0, #ccc 1rem, #999 1rem, #999 2rem);
animation: changeHeight 5s infinite alternate ease-in-out;
}<div class="example"></div>我试过的解决方案没有奏效
背景-位置
我try 过使用背景-位置来修复这个问题，但就我所知，只有在与repeating-linear-gradient结合使用时才能设置静态偏移量，并且任何百分比值都会被忽略.我不认为我在这里遗漏了任何明显的东西，但如果有一种方法可以使用背景-位置来解决这个问题，我会很高兴得到纠正.
对渐变使用负偏移
我也try 了使用负偏移量和calc(100% - ${offset}个偏移量来实现渐变，希望这可以将其锚点移动到相反的一侧.但据我所知，这对重复渐变是不起作用的.
潜在的替代方案(以及我不想使用它们的原因)
我不能完全确定是否有一个像我希望的那样简单的解决方案.因此，如果没有更好的 Select ，我可能最终要么不得不 Select 其中一个，要么不能解决这个问题.
但只要我还在寻找更好的解决方案，下面是我想过的其他 Select 以及我不愿使用它们的原因.
使用中间层
我可以在位于此元素内容下方的额外元素或伪元素上放置渐变，该元素可以附加到其父元素的顶部，并且非常高-足够高，以至于它的父元素永远不会被调整到更大-并在父元素上用overflow: hidden;隐藏任何溢出.
不过，如果可能的话，我宁愿避免这种情况.我的直觉告诉我，这可能会导致更严重的问题，当页面上同时有许多这样的元素时，还可能导致低功耗设备上的性能问题.
将渐变与固定的调整大小步长匹配
在我的特殊情况下，元素只能通过固定 skip 来调整大小.我可以使渐变的大小与 skip 的大小一致，所以即使它在移动，它最终也会移动到足以看起来像是静止的.
我宁愿不使用这种方法，因为它会给渐变模式增加一个额外的困难约束，这意味着我不能正确地实现我遵循的设计.
Use linear-gradient and background-repeat
可以使用linear-gradient构建固定大小的瓷砖，并将其设置为重复，然后使用背景-位置进行控制.然而，使用这种方法创建重复的Angular 渐变是非常精细的，并且无论何时改变带的Angular 或宽度，平铺都需要以几种不同的方式进行调整.
This article研究了这种方法的不利之处.
使用重复的背景图像
我可以使用这个重复背景的瓷砖的重复背景图像，并将其锚定在元素的顶部.
我不想使用这种方法，因为我希望渐变的形状和 colored颜色 很容易被其他开发人员(或future 的我)通过查看代码来读取，因为在我的用例中，它们将具有一些透明度，因此它们可以修改下面 colored颜色 的外观，所以对我来说， colored颜色 和透明度值很容易准确读取，而不需要任何额外的工具.
使用图像还意味着在css中不能轻松地调整Angular 和带宽，每次需要调整任何内容时，我们都需要创建一个新图像.
Use background-attachment
是的，从技术上讲，当元素调整大小时，background-attachment: fix;将阻止渐变移动.但它会在滚动页面时添加视差效果，这是我不想要的.
对变换使用额外的层
我可以用这种方式从下到上翻转的另一种方法是，要么旋转元素，要么用负比例翻转它.
我宁愿避免这一点，因为它需要额外的一组标记，以防止也将出现在该元素中的文本受到影响.
作为一个更小的问题，必须记住变换会增加阅读或修改渐变定义的额外脑力开销，而我宁愿避免这样的情况.