Css 悬停中的背景图像不'；t工作正常

我试图添加一个悬停效果，当用户在按钮上悬停时，它会添加背景图像，但在悬停时，左侧还有一个小区域仍然是透明的

基本上，我添加了两个按钮，彼此相邻，问题在于第二个按钮，如果我删除第一个按钮或将第二个按钮移动到下一行，那么它完全可以工作

这是我得到的。

下面是如果我删除第一个按钮的效果

这是密码

.gradient-button-1{
颜色：橙色；
背景：无；
填充：1.5雷姆3雷姆；
字体大小：1.3rem；
边框：实心10px透明；
边框图像：线性渐变（右上角，橙色，黄色）；
边界图像切片：1；
大纲：无；
过渡：均为0.3s；
}
.渐变按钮-1：悬停{
背景图像：线性渐变（右上角，橙色，黄色）；
颜色：白色；
}
.渐变按钮-2{
颜色：橙色；
背景：无；
填充：1.5雷姆3雷姆；
字体大小：1.3rem；
边框：实心10px透明；
边框图像：线性渐变（向右，橙色，透明）；
边界图像切片：1；
大纲：无；
过渡：均为0.3s；
}
.渐变按钮-2：悬停{
背景图像：线性渐变（向右，橙色，透明）；
边界权：无；
右边框样式：无；
颜色：白色；
}

渐变边框按钮
渐变按钮1
渐变按钮2

.gradient-button-1{
颜色：橙色；
背景：无；
填充：1.5雷姆3雷姆；
字体大小：1.3rem；
边框：实心10px透明；
边框图像：线性渐变（右上角，橙色，黄色）；
边界图像切片：1；
大纲：无；
过渡：均为0.3s；
}
.渐变按钮-1：悬停{
背景图像：线性渐变（右上角，橙色，黄色）；
颜色：白色；
背景位置：-1px；
背景大小：101%；
}
.渐变按钮-2{
颜色：橙色；
背景：无；
填充：1.5雷姆3雷姆；
字体大小：1.3rem；
边框：实心10px透明；
边框图像：线性渐变（向右，橙色，透明）；
边界图像切片：1；
大纲：无；
过渡：均为0.3s；
}
.渐变按钮-2：悬停{
背景图像：线性渐变（向右，橙色，透明）；
边界权：无；
右边框样式：无；
颜色：白色；
}

渐变边框按钮
渐变按钮1
渐变按钮2

在某些屏幕尺寸中，背景不是从最左边开始的；这就是为什么它会留下一个小间隙（白线）

您可以添加

背景原点：边框框至
。渐变按钮-2：悬停
。下面是一个很好的解释和实例：

background origin
CSS属性设置背景定位区域。换句话说，它使用
背景图像
属性设置图像集的原点位置


.gradient-button-1{
颜色：橙色；
背景：无；
填充：1.5雷姆3雷姆；
字体大小：1.3rem；
边框：实心10px透明；
边框图像：线性渐变（右上角，橙色，黄色）；
边界图像切片：1；
大纲：无；
过渡：均为0.3s；
}
.渐变按钮-1：悬停{
背景图像：线性渐变（右上角，橙色，黄色）；
颜色：白色；
}
.渐变按钮-2{
颜色：橙色；
背景：无；
填充：1.5雷姆3雷姆；
字体大小：1.3rem；
边框：实心10px透明；
边框图像：线性渐变（向右，橙色，透明）；
边界图像切片：1；
大纲：无；
过渡：均为0.3s；
}
.渐变按钮-2：悬停{
背景图像：线性渐变（向右，橙色，透明）；
边界权：无；
右边框样式：无；
颜色：白色；
背景来源：边框框；/*这行是新的*/
}

渐变边框按钮
渐变按钮1
渐变按钮2
将下面的css添加到按钮1：悬停：背景位置：-1px；背景大小：101%；最好使用MDN作为参考，而不是w3schools:@temaniaf如果你是对的，我用MDN参考更新了答案。非常感谢。