重复线性渐变突然在折叠下切割

Question

在my site上，我遇到了CSS中repeating-linear-gradient元素的问题。对于页面的大部分，背景看起来不错。但突然间，当我向下滚动时，看起来好像渐变只是将一个条向右移动并使我的页面看起来很难看。这就是我目前拥有的CSS：

    background:repeating-linear-gradient(45deg,transparent,transparent 50px,rgba(255,255,255,.1) 50px,rgba(255,255,255,.1)100px), #81D4FA;

我真的遇到了麻烦，如果有人可以帮助我，那就太好了。感谢。

Answer 1

正如评论中所提到的，background-attachment: fixed;会阻止接缝可见，但条纹不会随着页面滚动。

According to MDN：

  

重复的CSS线性渐变不是CSS <color>，而是带有的图像   没有内在的维度;也就是说，它没有自然或首选的大小，   也不是比例。它的具体尺寸将与其中一个元素相匹配   适用于。

这意味着图像边缘的定位取决于元素的大小，45度线不会与其邻居对齐，除非其中一个维度是另一个维度的倍数。我建议在您选择的图像编辑器中制作可图块化的图像，并将其作为资源加载，而不是使用repeating-linear-gradient()，如果您不希望将背景固定到位。