updated demo

Question

我正在尝试在<div>的渐变背景上创建转场。我试图这样做是因为我想在我的网站上实现两种不同的风格，一种是浅色的，另一种是较暗的。选择正确的颜色并实现在两个主题之间进行更改的方法后，我想为什么不建立一个过渡来平滑主题之间的切换。

我找到了转换渐变的方法。我找到了这个博客：Sapphion.com。它解释了如何通过background-position转换渐变。

将代码复制到jsFiddle之后，它就变得有效了。我在background-position上设置的内容无关紧要，它始终从0％转换为100％的完整渐变。我想将它从0％转换到50％，这样你才能看到渐变的50％到100％。有谁知道怎么做或者我错过了什么？

Answer 1

你的错误是指定背景位置：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;
}

通过背景位置过渡的渐变做了奇怪的事情

1 个答案:

updated demo