线性渐变和背景大小添加这种很酷的效果，任何人都可以解释一下

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

如果有人想要link，这里也有link。

https://codepen.io/arif_suhail_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;}
}

背景位置

如果您查看 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%。

有帮助吗？

线性渐变和背景大小添加这种很酷的效果，任何人都可以解释一下

Linear gradient and background size adding this cool effect, can any body explain

css

linear-gradients

background-position

background-size