Question

我有两张背景图片。第一张是我想要的一些树的图片，另一张是我想要悬停在树图顶部的黑盒子。

我遇到的问题是，当我使用'背景尺寸：封面'样式时，它会混淆它们。我只需要覆盖树图片，然后将盒子放在上面。这是代码：

    .main-image {
        width: 100%;
        height: 370px;
        background: url('../img/main-img-black.png'), url('../img/main-img.jpg') ;
        background-repeat: no-repeat, no-repeat;
        background-position: 10,0;
        background-size: 1, cover;  
    }

我希望这有道理！

Answer 1

Per MDN background-size: 1, cover;不是有效的CSS，因此规则“失败”。

尝试将其更改为：

background-size: 10px, cover;。

如果您没有将值设置为cover，contain，auto或零，则必须在数字后跟数字。

Answer 2

通过建议，想出来了。每个人都对背景大小的单位是正确的。这是工作代码：

.main-image {
width: 100%;
height: 370px;
background: url('../img/main-img-black.png'), url('../img/main-img.jpg') ;
background-repeat: no-repeat, no-repeat;
background-position: center;,0;
background-size: 700px, cover;

}

多个背景图像 - 只需要覆盖一个

2 个答案: