如何在 CSS 中的另一个背景图像下显示背景图像答案

【问题标题】：how to display a background-image under another background-image in CSS如何在 CSS 中的另一个背景图像下显示背景图像
【发布时间】：2017-11-17 14:18:46
【问题描述】：

我正在尝试弄清楚如何在我的第一张图片下显示另一张背景图片。我对 HTML 和 css 很陌生，我正在尝试找出一些东西，但似乎找不到。我知道图片在那里，因为当我在第二张背景图片的部分之间添加<p> 时，您可以看到一小部分图片（这可能是<p>-tag 的高度。）。所以我想我的宽度和高度有问题。但是，我尝试填写确切的高度和宽度，但这导致图片非常放大。也许这与使用 REM 错误有关？我不知道，我想这并不难做到，但我仍然没有成功。这就是我到目前为止所拥有的。您不会看到这些图片，因为它们是本地的，我希望这无关紧要吗？非常感谢您的帮助！

编辑：为了清楚起见，有2个全屏图像（main.jpg和kampvuur.jpg需要全屏显示，其他图像在全屏背景图像之上，仅用于设计） https://imgur.com/a/5jeVh

html{
  box-sizing: border-box;
  font-size: 62.5%;
  height: 100%;
}

*, *:before, *:after{
  box-sizing: inherit;
	margin: 0;
  padding: 0;
}

body{
  height: 100%;
}

.bg{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100%;
}

.mainpage{
    background-image: url(../assets/img/main.jpg);
}

.mainpage-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 20rem;
  height: 100%;
}

.title{
  background-image: url(../assets/img/tentacion-small.png);
  background-repeat: no-repeat;
  height: 10rem;
  width: 53.4rem;
  margin-bottom: 2rem;
}

.titlespan{
  visibility: hidden;
}

q{
  background-image: url(../assets/img/quote-sm.png);
  background-repeat: no-repeat;
  width: 63rem;
  height: 3.1rem;
}

.gif{
  background-image: url(../assets/img/arrowdown.gif);
  background-repeat: no-repeat;
  width: 10rem;
  height: 10rem;
}

.stars{
  background-image: url(../assets/img/kampvuur.jpg);

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>


    <header class="bg mainpage">
      <section class="mainpage-text">
        <h1 class="title"><span class="titlespan">tentacion</span></h1>
        <q><span class="titlespan">quote</span></q>
        <div class="gif"></div>
      </section>
    </header>

    <main>
      <section class="bg stars">
      <p>test</p>
      </section>

    </main>
  </body>
</html>

【问题讨论】：

两张图片都在那里 --> jsfiddle.net/sol_b/4a674n5v/2 你能提供一张你想要达到的目标的图片吗？
如果这些只是出于设计目的并且不需要交互，您可以在 1 个元素中查找多个背景图像（例如 body 标签）css3.info/preview/multiple-backgrounds -- 也可以使用 @987654324 @ 替换您的本地图像，以便您可以看到您不想做的事情。
@ovokuro imgur.com/a/5jeVh 这是一个链接，我在 Photoshop 中制作了这个，每个背景图像都应该是 +- 整页

标签： html image css

【解决方案1】：

您需要从 .message-text 中删除 padding-bottom 并更改此 css

.title{
  background-image: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
  background-repeat: no-repeat;
  height: 92px;
  width: 272px;
  margin-bottom:0;
}

html{
  box-sizing: border-box;
  font-size: 62.5%;
  height: 100%;
}

*, *:before, *:after{
  box-sizing: inherit;
	margin: 0;
  padding: 0;
}

body{
  height: 100%;
}

.bg{
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100%;
}

.mainpage{
    background-image: url('http://anatomyzone.com/wp-content/uploads/2014/01/skin3.general-boxed-bg-image.jpg');
}

.mainpage-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 0rem;
  height: 100%;
}

.title{
  background-image: url('https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
  background-repeat: no-repeat;
  height: 92px;
  width: 272px;
  margin-bottom:0;
}

.titlespan{
  visibility: hidden;
}

q{
  background-image: url(../assets/img/quote-sm.png);
  background-repeat: no-repeat;
  width: 63rem;
  height: 3.1rem;
}

.gif{
  background-image: url(../assets/img/arrowdown.gif);
  background-repeat: no-repeat;
  width: 10rem;
  height: 10rem;
}

.stars{
  background-image: url(../assets/img/kampvuur.jpg);

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>


    <header class="bg mainpage">
      <section class="mainpage-text">
        <h1 class="title"><span class="titlespan">tentacion</span></h1>
        <q><span class="titlespan">quote</span></q>
        <div class="gif"></div>
      </section>
    </header>

    <main>
      <section class="bg stars">
      <p>test</p>
      </section>

    </main>
  </body>
</html>

【讨论】：

您好，感谢您的帮助。我认为我想去哪里还不是很清楚。我在 Photoshop 中快速制作了一些东西。 imgur.com/a/5jeVh