关于 'background-image' 属性中具有相同值的多个背景图像； [关闭]

Question

.div{
            width: 200px;
            height: 200px;
            border-top:20px solid black;
            border-bottom:20px solid black;
            background-position: 0%,100%;
            -webkit-background-size: 20px 100%;
            -moz-background-size: 20px 100%;
            background-size: 20px 100%;
            background-repeat: no-repeat;
            background-image: linear-gradient(to bottom, red, green), linear-gradient(to bottom, red, green);
        }

<div class="div"></div>

当我使用多个背景时，为什么在background-image属性中设置相同的值，但第一个背景图像没有被第二个图像覆盖。我很困惑，有人知道吗？提前谢谢；

ok，sorry，没有人能理解这个问题，可能是因为我的描述太糟糕了。 我的意思是我用线性渐变为“背景图像”属性设置了两个值来设置两个背景图像，看这个：

background-image:linear-gradient(to bottom, red, yellow),linear-gradient(to bottom, red, yellow);

并且设置其他背景属性相同，看这个：

background-position:0%,100%;
background-size:20px 100%;

好的，两张背景图所有属性都一样，所以第一张背景图应该被第二张图片覆盖，但不是，它们显示在左右，为什么？

Answer 1

这种风格

background-size:20px 100%;

表示背景的水平尺寸为20px。由于只有一个值，因此它适用于两种梯度。

这种风格

background-position:0%,100%;

有 2 个值，所以第一个适用于第一个渐变。在这种情况下，位置 0% 表示完全向左。第二个适用于第二个渐变，在这种情况下，100% 表示完全正确。

这种差异也适用于垂直位置，但由于渐变的大小为 100%，因此没有任何效果