html - 通过背景位置的梯度过渡做奇怪的事情

Question

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

我查找了一种过渡渐变的方法。我找到了这个博客:Sapphion.com .它解释了如何通过 background-position 过渡渐变。 .

将代码复制到jsFiddle之后它有点奏效。我在 background-position 上设置了什么并不重要它总是过渡到从 0% 到 100% 的完整梯度。我想将它从 0% 过渡到 50%，这样您只能看到 50% 到 100% 的渐变。有谁知道该怎么做，或者我错过了什么吗？

Answer 1

你的错误是指定 background-position: 100y;处于悬停状态。

它应该是(因为你在垂直方向移动渐变)

background-position-y: -100px;

完整的 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;
}  

updated demo