添加这个很酷的效果线性渐变和背景大小，可以任何身体的解释

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

如果任何机构想在这里有链接的链接也是如此。

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

后台位置

如果检查出的CSS规范为background-position，你会看到，默认值是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部分。看到你的背景如何匹配你的元素的整个宽度，水平值不会改变任何东西。但是bottom垂直设置。现在意味着显示第二个50％。

这有帮助吗？