Css 线性梯度和背景尺寸加上这种酷的效果，任何人都能解释吗

如果这是一个愚蠢的问题，我很抱歉，但这段代码让我发疯了，我把它删掉，本来以为我能理解，但在这样做并投入2-4个小时后，现在我对我认为我知道的事情感到困惑。 下面的代码添加了这个很酷的效果，当我结束时，它看起来像是背景从底部出现到顶部， 我只知道它与背景图像、线性梯度、背景大小和背景位置有关

请看一看，试着把我从痛苦中解救出来。 HTML代码

<ul><li><a href="#" title="Home">Home</a></li> </ul>

如果任何人想要链接，这里也是链接

---

我在下面注释了你的风格，希望能解释一下发生了什么

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;}
}

背景位置

如果您查看的是CSS规范，您将看到默认值是

0%0%

，基本上是

左上方的

您的CSS代码没有指定初始背景位置，因此它将默认为
左上
。记住这一点

您的背景渐变定义为从
到底部
，因此从
顶部->底部
。前50%是透明的（不可见）。第二个50%由两种不同的颜色组成

然后考虑你的背景梯度是元素高度的两倍。这由
背景大小指定：100%200%
（100%宽度，200%高度）。背景可以大于应用它的元素，任何溢出都将被隐藏

所以，最初，当你只显示背景渐变的上半部分时，你会看到什么？只有
透明的部分

然后在悬停时覆盖
背景位置
，表示现在显示
底部中间部分。查看背景如何匹配元素的全宽，
center
水平值不会改变任何内容。但是
底部设置不起作用。现在意味着显示第二个50%

这有帮助吗？
我在下面注释了你的风格，希望能解释发生了什么

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;}
}

背景位置

如果您查看的是CSS规范，您将看到默认值是
0%0%
，基本上是
左上方的

您的CSS代码没有指定初始背景位置，因此它将默认为
左上
。记住这一点

您的背景渐变定义为从
到底部
，因此从
顶部->底部
。前50%是透明的（不可见）。第二个50%由两种不同的颜色组成

然后考虑你的背景梯度是元素高度的两倍。这由
背景大小指定：100%200%
（100%宽度，200%高度）。背景可以大于应用它的元素，任何溢出都将被隐藏

所以，最初，当你只显示背景渐变的上半部分时，你会看到什么？只有
透明的部分

然后在悬停时覆盖
背景位置
，表示现在显示
底部中间部分。查看背景如何匹配元素的全宽，
center
水平值不会改变任何内容。但是
底部设置不起作用。现在意味着显示第二个50%

这有帮助吗？
我接受你的解决方案，因为它确实有意义，但我仍然对背景位置感到困惑，你能再解释一下吗thanks@user2860957-我已经更新了我的答案。这有助于澄清吗？如果没有，你能再解释一下你不明白的地方吗？定位，梯度是如何产生的，等等？@fuber感谢好心人的帮助，我一直在阅读它并不断感到困惑，之后我搜索背景大小是如何工作的，如果我在发布评论之前用谷歌搜索它，你就不必浪费时间编辑完美的解决方案，如果你也可以添加这一行，背景大小可以比元素大，但它只会显示元素大小的背景，希望你理解我在尝试什么，因为任何像疯子一样来到这里，这可能会帮助他，理解这里发生了什么。谢谢，我也向上投票你给我回答了两个问题谢谢我添加了那一行（用稍微不同的词）。我接受你的解决方案，因为它确实有意义，但我仍然对背景位置感到困惑，你能解释一下吗thanks@user2860957-我已经更新了我的答案。这有助于澄清吗？如果没有，你能再解释一下你不明白的地方吗？定位，梯度是如何产生的，等等？@fuber感谢好心人的帮助，我一直在阅读它并不断感到困惑，之后我搜索背景大小是如何工作的，如果我在发布评论之前用谷歌搜索它，你就不必浪费时间编辑完美的解决方案，如果你也可以添加这一行，背景大小可以比元素大，但它只会显示元素大小的背景，希望你理解我在尝试什么，因为任何像疯子一样来到这里，这可能会帮助他，理解这里发生了什么。谢谢，我也向上投票。你给我回答两个问题。谢谢。我加了那句话（用稍微不同的词）。