调整窗口屏幕大小时图像跟随背景

Question

我正在寻找一种方法来执行以下操作：

我的 HTML 页面上有两个部分，第一个在其 CSS 类中具有背景图像属性，并且在此部分底部还有一个徽标，我还有第二个部分，它只是一个普通部分，其中包含一些文本。

这张图显示了我当前使用的结构。

如果窗口屏幕被调整大小，标志图像必须跟随背景图像并保持其在图像底部的位置。

我尝试的最后一件事：

.background {
    background: url('../images/background-heroes.png') no-repeat;
    background-position: top center;
    background-size: 100% auto;
    position: fixed;
    width: 100%;
    height: 100%;
}

.background .logo {
    width: 20%;
    padding: 20% 0 5% 0;
    margin: 0 auto;
}

.background h1 {
    font-size: 3em;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

<section class="background">
   <div class="logo">
     <img src="images/logo.png">
   </div>
   <h1>LIVE YOUR OWN ANIME!</h1>
</section>

不幸的是，我粘贴的这个解决方案使第二部分消失了。

Answer 1

这似乎与您要完成的工作有关：

CSS

.background-image {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

HTML

<div class="background-image">
    <img class="logo">
</div>

<div class="another-section"></div>