我正在尝试在<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/