添加這個很酷的效果線性漸變和背景大小，可以任何身體的解釋

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％。

這有幫助嗎？