Question

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

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

第一张图片的CSS代码是

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

我在this question中尝试了解决方案，但是当这样写完时，我的第一张图片也会消失。

我也试过

.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>

如何使用两个背景图像

2 个答案: