代码之家 › 专栏 › 技术社区 › user2860957

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

background-size background-position linear-gradients css

1

user2860957 · 技术社区 · 7 年前

如果这是一个愚蠢的问题,我很抱歉,但这段代码让我发疯了,我把它去掉,本来以为我能理解,但在做了这件事并投入了2-4个小时后,现在我对我认为我知道的事情感到困惑。我只知道它与背景图像、线性梯度、背景大小和背景位置有关

请看一看,试着把我从痛苦中解救出来。

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

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

1 回复 | 直到 7 年前

1

2

fubar 7 年前

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

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 ,您将看到默认值为 0% 0% ,这基本上是 top left .

左上角 .记住这一点。

您的背景渐变已定义 to bottom ,所以从 top -> bottom transparent

然后考虑背景渐变是元素高度的两倍。这是由 background-size: 100% 200% (100%宽度,200%高度)。背景可以大于应用背景的元素,任何溢出都将被隐藏。

透明的 部分

然后覆盖 background-position 悬停时,你是说现在显示 bottom center 部分考虑到您的背景如何匹配元素的全宽 center bottom 垂直设置。现在意味着显示第二个50%。