响应式附加标语和背景图像答案

【问题标题】：slogan and background image attach responsively响应式附加标语和背景图像
【发布时间】：2018-06-18 18:02:21
【问题描述】：

我正在尝试设计这样的标题，其中标语和背景图片附加在所述图片中。我想使用 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>

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

【问题讨论】：

标签： html css responsive-design flexbox

【解决方案1】：

你注意到类 'span' 的 div 是用 p 标签封闭的吗？如果你想把宽度放在那里，那就是问题了。

【讨论】：

【解决方案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;
}

【讨论】：