css - 关于这段代码的问题

问题描述

问 题

代码是这样的：

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

解决方案

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

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

background-size:200% 100%;

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

这篇关于css - 关于这段代码的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！