如何使用两个背景图片

Question

我正在使用Bootstrap模态框在我的网站上。我想要使用两张图片作为背景。我能够成功地使用一张图片。当我尝试包含第二张图片时，我遇到了问题。

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

我的第一张图片的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;
}

然而它只显示了一张图片。

- vikrant Verma

---

请问您能否发布您的HTML代码？ - jean-max

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>

- hdotluna

---

请不要使用W3Schools作为资源。他们的指南经常过时，有时甚至完全错误。尝试使用更可靠的来源，例如MDN。 - Rory McCrossan

这里有另一个更可靠的来源：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds，这是浏览器兼容性：http://caniuse.com/#feat=multibackgrounds。 - Mr. Hugo

Answer 2

你应该在这个上面再包含一个 div 元素。

通过调整外层元素的 padding 值，你可以调整内部元素的位置和大小。

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

- user7250444

---

我认为使用其他多个CSS背景解决方案与浏览器兼容性存在很大差异...... 我认为这种方法在任何时候都可以100%正常工作，而其他解决方案则经常失败。你是否知道具体的区别是什么？ - Mr. Hugo