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属性中设置相同的值，但是第一个背景图像没有被第二个图像覆盖。我很困惑，有人知道吗？提前感谢;

好的，对不起，没有人能理解这个问题，也许是因为我的描述太糟糕了。我的意思是我为'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％表示完全左侧。第二个适用于第二个渐变，在这种情况下，100％表示完全正确。

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

关于“background-image”属性中具有相同值的多个背景图像;

1 个答案: