css - 调整 bootstrap jumbotron 背景图像以避免与文本冲突

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

尝试转换成这样的东西:

<div class="jumbotron jumbotron-fluid bg-dark">
    <div class="jumbotron-background">
        <img src="assets/background_img4.jpg" class="blur ">
    </div>
    <div class="container text-white" style="background-color: transparent; border: none;">
        <h1>Some text</h1>
    </div>
</div>

然后，您可以通过更改以下属性来调整背景:

.jumbotron-background {
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
}