关于这段代码的问题

fatears
  • 326

代码是这样的:

a {
display: inline-block;
height: 40px;
padding: 10px 20px;
color: #fff;
transition: all .3s ease-out;
background: linear-gradient(to left, #D2D2D2 50%, #149c82 50%);
background-size: 200% 100%;
background-position: right bottom;
}
a:hover {
background-position: left bottom;
}

为什么background-size: 200% 100%;可以让背景颜色从双色变成单色?还有为什么background-position: right bottom;可以把绿色隐藏而background-position: left bottom;可以让绿色显示出来?

回复
阅读 1.8k
2 个回答
✓ 已被采纳
background: linear-gradient(to left, #D2D2D2 50%, #149c82 50%); 

这里设置了从左到右,50%是绿色,50%是灰色。

background-size:200% 100%;

表示以元素的200%宽来设置背景的宽度。 也就是说50%的背景宽度,就等于100%的元素宽度了,所以另外50%的背景就不显示了。

1.linear-gradient设置了渐变

background: linear-gradient(to left, #D2D2D2 50%, #149c82 50%);

后面参数都是50%,所以渐变的效果为一半绿色,一半灰色,to left,让渐变效果从右往左渐变,所以这段代码的效果为左边一半为绿色,右边一半为灰色。

2.由于渐变其实是背景图片,也就是说设置上面渐变效果等同于

background-image: linear-gradient(to left, #D2D2D2 50%, #149c82 50%);

所以

background-size: 200% 100%; // 第一个参数为水平轴(x),第二个参数为垂直轴(y),

使得渐变宽度变为当前元素宽度的2倍,高度一样,

3.

background-position: right bottom;

使得背景渐变显示右边,也就显示右边一半的灰色了
4.hover后

background-position: left bottom;

使得背景渐变显示左边,也就显示左边一半的绿色了
5.由于添加了transition过渡效果

总结就是,你班渐变当成背景图片看,而不是颜色看就对了。

整体步奏大概如下图
图片描述

临时用ps画的图,比较粗糙,哈哈,希望对你有帮助。

宣传栏