0

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

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

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

4

1 回答 1

0

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

更新的演示

于 2013-08-29T20:58:47.067 回答