如果这是个愚蠢的问题，我很抱歉，但是这段代码让我发疯了，我把它拆下来，以为我能够理解，但是在这样做并投入 2-4 小时之后，我现在对我所做的事情感到困惑以为我知道。下面的代码在我结束时添加了这个很酷的效果，看起来背景是从底部出现并到达顶部，只认为我知道它与背景图像、线性渐变、背景大小和背景位置有关
请看一看，试着让我摆脱痛苦。代码
<ul><li><a href="#" title="Home">Home</a></li> </ul>
css代码
li {
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
background-size: 100% 200%;
transition: all .25s ease;
}
li:hover {
background-position: bottom center;}
li a {display: block;
padding: 1rem 0;}
如果任何机构想要链接，这里也是链接。
我在下面注释了你的样式，希望能解释发生了什么。
li {
// You're creating a background gradient, where the first 50% is transparent, the next 45% is #a2d39c and the last 5% is #7cc576
background-image:
linear-gradient(to bottom,
transparent 50%,
#a2d39c 50%, #a2d39c 95%, #7cc576 95%);
// The background size is twice the height of your element. Therefore with the 50% transparency and initial position, you're not going to see anything
background-size: 100% 200%;
// This will nicely transition between CSS property values when they change
transition: all .25s ease;
}
li:hover {
// When you hover over your list item, you're changing the position so that the bottom of the background is visible. This causes the 50% transparent portion of the background to disappear, and the coloured portion to slide into view
background-position: bottom center;}
}
背景位置
如果您查看background-position的 CSS 规范，您会看到默认值是0% 0%，基本上是top left.
您的 CSS 代码未指定初始背景位置，因此默认为top left. 记住这一点。
您的背景渐变已定义to bottom，因此从top -> bottom. 前 50% 是transparent（不可见的）。第二个 50% 由两种不同的颜色组成。
然后考虑您的背景渐变是元素高度的两倍。这是由background-size: 100% 200%（100% 宽度，200% 高度）指定的。背景可以大于应用它的元素，并且任何溢出都将被隐藏。
所以最初当你只显示背景渐变的上半部分时，你会看到什么？只有transparent部分。
当您覆盖background-position悬停时，您是说现在显示该bottom center部分。看看你的背景如何与元素的全宽相匹配，center水平值不会改变任何东西。但bottom垂直设置确实如此。现在意味着显示第二个 50%。
这有帮助吗？
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句