关于'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>

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

ok，sorry，没人能看懂问题，可能是我描述的太烂了。我的意思是我为 'background-image' 属性设置两个值，线性渐变设置两个背景图像，看这个：

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% 表示完全靠左。 second适用于第二个渐变，100%在本例中表示完全正确。

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

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

About multiple background images with the same value in 'background-image' property;

css

background-image

linear-gradients