关于这段代码的问题

Question

代码是这样的：

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;可以让绿色显示出来？

Answer 1

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

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

background-size:200% 100%;

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

Answer 2

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画的图，比较粗糙，哈哈，希望对你有帮助。