口号和背景图片相应附加

Question

我正在尝试设计这样的标题，其中标语和背景图像附在所述图片中。我想使用flex来使它工作，但它不起作用。给予宽度打破响应性。我创建了一个jsbin来显示演示，这里是

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

源代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

您是否注意到班级＆＃39; span＆＃39; div用p标签关闭？如果你想把宽度放在那里，那就是问题所在。

Answer 2

更改CSS文件中的以下代码并尝试一次。

.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 {
  margin-top: 70px;
}

.slogan-text > h1 {
      font-size: 3.375rem;
    font-weight: 900;
    letter-spacing: 5px;
    color: #373f48;
    background-color: #fff;
    padding: 80px 40px;
    width: auto;
    max-width: 319px;
}

.slogan-text {
  padding: 100px 30px 100px 0;
  position: relative;
  z-index: 1;
}