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

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;
}  

<标题>更新演示