Css 在线性渐变上使用背景位置的百分比值

有没有办法让

背景位置

获取百分比值？当前，我的按钮仅适用于

宽度

和

背景位置

的显式值

正文{
最小高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
}
.按钮{
显示器：flex；
证明内容：中心；
对齐项目：居中；
文字装饰：无；
颜色：白色；
字体大小：粗体；
宽度：350px；
高度：50px；
边框：1px纯绿色；
过渡：背景0.5s；
背景重复：无重复；
背景图像：线性渐变（向左，#2484c6，#1995c8 51%，#00bbce），线性渐变（向右，#2484c6 0%，#1995c8 51%，#00bbce 76%）；
}
.按钮像素{
背景位置：-350px 0px，0px 0px；
}
.按钮像素：悬停{
背景位置：0px 0px，350px 0px；
}
.按钮百分比{
背景位置：-100%0px，0px 0px；
}
.按钮百分比：悬停{
背景位置：0%0px，100%0px；
}

TL；博士 当使用渐变作为背景时，与背景位置一起使用的所有百分比值都是等效的，因此您不会看到任何差异。您需要指定与容器大小不同的

背景大小

：

正文{
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
最小高度：90vh；
}
.按钮{
文字装饰：无；
颜色：白色；
字体大小：粗体；
宽度：350px；
高度：50px；
文本对齐：居中；
过渡：背景0.5s；
背景重复：无重复；
背景图像：
线性梯度（向左，#2484c6，#1995c8 51%，#00bbce），
线性梯度（向右，#2484c6 0%，#1995c8 51%，#00bbce 76%）；
背景大小：200%100%；/*更改了此设置*/
}
.按钮像素{
背景位置：-350px 0px，0px 0px；
}
.按钮像素：悬停{
背景位置：0px 0px，350px 0px；
}
.按钮百分比{
背景位置：100%0px，0px 0px；
}
.按钮百分比：悬停{
背景位置：0%0px，100%0px；
}

---

我喜欢做的是。@Temaniaf如果答案这么宽，它是否包含百分比悬停背景位置的内容解决方案？