当悬停按钮时，为什么线性渐变应该重复？

Question

我的代码位于https://codepen.io/xflotus/pen/gzWyrg。按钮设置为线性渐变背景，如下所示：

background-color: #0cf;
background-image: -webkit-linear-gradient(top, #0cf, #069);
background-image: linear-gradient(top, #0cf, #069);

。悬停按钮时，背景向下移动10px。

background-position: 0 10px;

但是有一个灰色条不好。那么，

background-repeat: repeat-x;

已添加。我认为背景图像应该重复，因为它是垂直线性渐变，并且gary bar是由于它向下移动。那么，为什么？