html - 标语和背景图片响应式附加

Question

我正在尝试设计这样的 header ，其中标语和背景图像附在所述图片中。我想使用 flex 使其工作，但它不工作。提供宽度会破坏响应能力。我已经创建了一个 jsbin 来展示演示，它就在这里

http://jsbin.com/muguwavosa/edit?html,css,output

源代码

    .header {
      display: flex;
      flex-direction: column;
      background-image: url('https://www.rj-investments.co.uk/wp-content/uploads/2018/02/Home-Featured.jpg');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      background-attachment: fixed;
      padding: 100px 0;
    }
    
    .slogan-wrapper {
      background: #fff;
      padding: 80px 0 0 40px;
      margin-top: 70px;
    }
    
    .slogan-text > h1 {
      font-size: 3.375rem;
      font-weight: 900;
      letter-spacing: 5px;
      color: #373f48;
    }
    
    .slogan-text {
      padding: 100px 70px 100px 0;
      position: relative;
      background: #fff;
      z-index: 1;
    }

    <div class="header">
      <div class="slogan-wrapper grid">
        <div class="slogan">
          <div class="slogan-text">
            <h1>Hustle, Loyalty, Respect</h1>
          </div>
      </div>
    </div>

这正是我想要的，它是一个全 Angular 标题

Answer 1

您是否注意到类“span”div 是用 p 标签关闭的？如果你想把宽度放在那里，那就是问题所在。