background-size对linear-gradient()有效而对普通color无效的原因

最近在某金上看到一篇文章，要求实现下面的效果：

代码如下：

html:

<h2 class="title"><span>dsfsdf</span></h2>

 css:

 .title{
        color: #333;
            line-height: 2px;
    }
    span{
        background: linear-gradient(to right, #ec695c,#ec695c) no-repeat right bottom;
            background-size: 100% 2px;
            transition: background-size 1300ms;


    }

 然而当我把linear-gradient(to right, #ec695c,#ec695c)改成red后就变成了下面这样:

经过一番查阅：

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。（mdn原话）

background-size 用来设置背景图片大小，所以background-size对background-color是无效的

那为什么对linear-gradient有效呢？

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。（mdn原话）

原来linear-gradient() 创建的是图片！

那问题就迎刃而解了

萌新第一次写文章，写得不好请见谅！

相关链接：

css是你永远学不会的语言 - 掘金 (juejin.cn)

background-size - CSS：层叠样式表 | MDN (mozilla.org)

linear-gradient() - CSS：层叠样式表 | MDN (mozilla.org)