我正在尝试在<div>的渐变背景上创建过渡。我正在尝试这样做,因为我想在网站上实现两种不同的样式:浅样式和深色样式。在选择了正确的颜色并实现了在两个主题之间进行更改的方式之后,我想到了为什么不建立一个过渡来使主题之间的切换更平滑。

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

将代码复制到jsFiddle后,它可以工作了。不管我在background-position上设置什么,它始终会从0%过渡到100%的完整渐变。我想将其从0%过渡到50%,以便您只看到渐变的50%至100%。有人知道该怎么做,还是我错过了什么?

最佳答案

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

关于html - 通过背景位置进行渐变过渡会产生奇怪的结果,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16648460/

10-12 12:50
查看更多