重复-线性-梯度突然在褶皱下切割。

Question

在我的网站上，我对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;将阻止seam可见，但是条纹不会与页面一起滚动。

根据MDN：

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

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