如何将repeating-linear-gradient锚定到元素顶部？

问题描述 #

我正在开发一个带有条纹背景的UI组件，用户可拖动其底部边缘调整尺寸。

我使用repeating-linear-gradient实现了条纹背景，单独使用时效果正常，但从底部调整元素尺寸时，整个背景会随元素移动，而非锚定在顶部边缘。

我希望将渐变锚定到顶部边缘，让背景随元素扩展而非移动。

最小复现示例 #

注意：该示例包含动态效果，可能分散注意力，但为演示问题所必需。

CSS 代码 #

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;
}

HTML 代码 #

<div class="example"></div>

尝试过但无效的解决方案 #

background-position #

我尝试用background-position解决，但它与repeating-linear-gradient配合时仅支持静态偏移，百分比值会被忽略，若有可行方案欢迎指正。

使用负偏移调整渐变 #

我尝试用负偏移及calc(100% - ${offset}偏移来转移锚点，但这对重复渐变无效。

潜在替代方案（及不选用的原因） #

我不确定是否存在理想的简单方案，若没有更好选择，可能只能选用其中一种或放弃解决。以下是备选方案及不选用原因：

使用中间层 #

将渐变放在额外元素或伪元素上，固定在父元素顶部且高度足够大，父元素设overflow: hidden;，但可能引发后续问题及低功耗设备性能问题。

将渐变与固定调整步长匹配 #

让渐变尺寸与元素固定调整步长匹配，视觉上看似静止，但会给渐变图案增加约束，无法实现设计要求。

使用linear-gradient和background-repeat #

用linear-gradient构建tile再重复，通过background-position控制，但创建带角度的重复渐变繁琐，修改角度或条带宽度需多处调整。

使用重复背景图片 #

用重复背景图片锚定到顶部，但无法通过代码直观读取渐变参数，且修改需重新生成图片。

使用background-attachment #

background-attachment: fixed;可阻止背景移动，但会产生不需要的页面滚动视差效果。

使用带transform的额外层 #

通过旋转或负缩放实现锚定，但需额外标记避免文本受影响，且增加渐变修改的认知负担。

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