Html 如何制作局部附着的重复线性渐变

我最近一直在尝试创建一个文本区域，它使用重复的线性渐变来分隔行，但是，当我滚动时，渐变不会附加到文本框。 我做错什么了吗

顺便说一下，下面是代码：

#正文
{
背景：url（“https://www.linkpicture.com/q/2cOaJ-2.png");
背景尺寸：30px 33325px；
背景位置：0px 11px；
背景附件：本地；
背景重复：无重复；
左侧填充：35px；
填充顶部：10px；
边框颜色：#ccc；
字体大小：15px；
显示：块；
边际：0px；
线高：1.5；
宽度：400px；
身高：225px
}
.TextareaWrapper
{
显示：内联块；
背景图像：重复线性渐变（到底部，#ffffff，#f0 50%）；
背景附件：本地；
背景尺寸：100%45px；
背景位置：左10px；
}

因为您正在滚动的元素是

textarea

，而不是

.TextareaWrapper

，所以

后台附件：local

无法为其子元素应用滚动

您可以使用逗号分隔的缩写将这两个背景图像组合成一个

background

属性，甚至不再需要

TextareaWrapper

background:url（“https://www.linkpicture.com/q/2cOaJ-2.png）0px 11px/30px 33325px局部无重复，重复线性梯度（到底部，#ffffff，#f0f0 50%）左10px/100%45px局部；

这两个背景将合并为一个图像，以共享相同的滚动位置：

#正文
{
背景：url（“https://www.linkpicture.com/q/2cOaJ-2.png）0px 11px/30px 33325px局部无重复，重复线性梯度（到底部，#ffffff，#f0f0 50%）左10px/100%45px局部；
左侧填充：35px；
填充顶部：10px；
边框颜色：#ccc；
字体大小：15px；
显示：块；
边际：0px；
线高：1.5；
宽度：400px；
身高：225px
}