线性梯度和背景大小加上这个凉爽的效果，有人能解释吗？

Question

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

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

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

如果有人想要有链接，这里也是链接。

123/pen/jLPYOB

Answer 1

我在下面注释了你的风格，希望能解释一下正在发生的事情。

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%，基本上是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%。

这有用吗？