Question

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

编辑：为了清楚，有2个全屏图像（main.jpg＆amp; 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>

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

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

1 个答案: