Html 通过背景位置进行渐变会产生奇怪的效果

我试图在

的渐变背景上创建一个过渡。我正试图这样做，因为我想在我的网站上实现两种不同的风格：浅色和深色。在选择了正确的颜色并实现了在两个主题之间切换的方法之后，我想为什么不构建一个过渡来平滑主题之间的切换呢

我找到了一种过渡渐变的方法。我发现这个博客：。它解释了如何通过

背景位置转换渐变

在将代码复制到一个数据库之后，它工作起来了。无论我在
背景位置设置什么，它总是从0%过渡到100%的全渐变。我想把它从0%过渡到50%，这样你只看到50%到100%的渐变。有人知道怎么做吗？或者我错过了什么吗？
您的错误是指定了背景位置：100y；处于悬停状态

它应该是（因为您在垂直方向上移动渐变）

完整CSS：

#DemoGradient{
    background: linear-gradient(to bottom, #ffffff 0%, #bfbfbf 50%, #45484d 50%, #000000 100%);
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
    background-size:1px 200px;  /* correct value if you want it to get at 50% */
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position-y: -100px;
}  

你的小提琴起作用了，有什么问题吗？我有一个梯度，上面有两个梯度。我想从光明过渡到黑暗。而且
背景位置
属性似乎已经过时。
#DemoGradient{
    background: linear-gradient(to bottom, #ffffff 0%, #bfbfbf 50%, #45484d 50%, #000000 100%);
    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  
    background-size:1px 200px;  /* correct value if you want it to get at 50% */
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position-y: -100px;
}