嘿，我来帮你捋清楚这个按钮背景的问题～

首先，咱们先拆解你遇到的情况：你给按钮设置了垂直线性渐变，hover时通过background-position: 0 10px让背景下移，结果出现了讨厌的灰色条，你加了background-repeat: repeat-x，但直觉觉得应该用repeat-y——你的直觉完全正确，咱们一步步说清楚：

为什么会出现灰色条？ #

你当前的渐变是linear-gradient(top, #0cf, #069)，默认情况下，这个渐变的尺寸和按钮元素一样大（background-size: 100% 100%），而且默认background-repeat: repeat（水平、垂直都重复）。当你把背景位置下移10px后，按钮顶部的10px区域会用重复的渐变片段填充——但渐变是从顶部亮蓝色#0cf到底部深蓝色#069，重复的部分会把渐变的底部深蓝色区域“复制”到顶部，这就出现了你看到的深色（灰色）条。

你加的repeat-x是让背景仅水平重复，垂直方向不重复，理论上顶部10px会显示background-color: #0cf（和渐变顶部颜色一致），但实际出现灰色条，大概率是浏览器渲染时的衔接断层问题。

正确解决方案：repeat-y + 调整背景尺寸 #

要实现平滑的背景下移效果，咱们需要让渐变在垂直方向可重复，同时调整背景尺寸，避免出现断层：

1. 先把渐变的高度设置为按钮高度+10px（也就是你要下移的距离），这样下移后露出的部分还是渐变的顶部区域：

.button {
  background-color: #0cf;
  background-image: -webkit-linear-gradient(top, #0cf, #069);
  background-image: linear-gradient(to bottom, #0cf, #069); /* 建议用to bottom更标准 */
  background-size: 100% calc(100% + 10px); /* 宽度100%，高度=按钮高度+10px */
  background-repeat: repeat-y; /* 垂直重复背景 */
}

2. hover时只需要调整背景位置：

.button:hover {
  background-position: 0 10px;
}

这样设置后，hover时背景下移10px，露出的是重复的渐变顶部#0cf区域，和原顶部颜色完全衔接，灰色条自然就消失了～

为什么repeat-y才是正确选择？ #

你的渐变是垂直方向的（从顶部到底部），要让背景在垂直方向重复填充，自然要用repeat-y。repeat-x是水平方向重复，对垂直渐变来说毫无意义，反而会导致垂直方向的空白只能用背景色填充，容易出现渲染断层。

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