如何使用两个背景图像

Question

我在网站中使用了引导模式。我想使用两个图像作为背景。我能够成功地使用一张图像。当我尝试包含第二张图像时，我面临问题。

我的第一个图像出现在整个模态上，第二张图像很小，但我希望它出现在第一个图像的顶部。

我的第一个图像的CSS代码是

.modal-content{
    background-image: url("{% static "markatix/imgs/modal/bg.png" %}");
}

我在这个问题中尝试了解决方案，但是当这样写时，我的第一个图像也消失了。

我也尝试了

.modal-content{
    background-image: url("{% static "markatix/imgs/modal/bg.png" %}") ,url("{% static "markatix/imgs/modal/bg2.png" %}") ;
    background-repeat: no-repeat,no-repeat;
    background-position: center, center;
}

但是，它只显示了一个图像。

Answer 1

在这里阅读：http：//www.w3schools.com/css/css3_backgrounds.asp

#example1 {
    background-image: url(http://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg), url(https://s-media-cache-ak0.pinimg.com/originals/f5/9b/1b/f59b1b0cc430702e82dea90780d7f87d.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, no-repeat;
    background-size: 20%, 20%;
    height: 100vh;
    width: 100%;
}

<div id="example1"></div>

Answer 2

您应该在此顶部包含另一个div

您可以通过调整外部焊接

来调整内在的位置和大小

 .main-div{
      margin:0;
      padding:50px;
      width:300px;
      height:200px;
      background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Geres1.jpg/480px-Geres1.jpg");
      background-size:cover;
      background-repeat:no-repeat;
      background-position:center;
    }
    
    .overlay-div{
      margin:auto;
      padding:0;
      width:100%;
      height:100%;
      background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Venus_globe.jpg/480px-Venus_globe.jpg');
      background-size:cover;
      background-repeat:no-repeat;
      background-position:center;
    }

 <div class="main-div">
      <div class="overlay-div">
      </div>
      </div>