调整自举超大背景图片以避免与文字发生冲突

Question

我有一个带有背景图片和文字的巨型飞轮。我需要调整图像，以使文本不会与背景图像的任何部分发生冲突。

HTML：

<div class="jumbotron">
  <div class="container">
    <h1>Header title text</h1>
    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
  </div>
</div>

CSS：

.jumbotron {
  position: relative;
  background: #fff url("https://s3.us-east-2.amazonaws.com/ftp-assets/family.png") center center;
  width: 100%;
  height: 400px;
  background-size: cover;
}

h1 {
  margin-top: -30px;
  margin-left: -20px;
}

p {
  margin-left: -2%;
}

JSFIDDLE：https://jsfiddle.net/2ek2e2rf/

Answer 1

尝试转换为这样的内容：