如何解决背景图像不透明度导致文本不可读的问题？ [复制]

Question

我的背景有问题。我想要和截图 1 一样，但我和截图 2 一样。

问题出在哪里？

html,
body,
.bg-for-1 {
  height: 100%;
}

.bg-for-1 {
  background: black;
}

.bg-for-1 .first {
  position: absolute;
  opacity: 0.2;
  width: 100%;
  height: 100%;
  background-image: url(http://digitalresult.com/wp-content/uploads/2016/06/beautiful-reflection-at-lake-pier-wallpaper-32.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-for-1 .first h3 {
  color: white;
  position: relative;
  text-align: center;
}

<div class="bg-for-1"><div class="first"><h3>Hello</h3></div></div>

Answer 1

由于您需要用黑色使图像变暗，因此您可以使用半透明渐变在图像上设置深色叠加层，这不会对内容产生影响：

与How to add a color overlay to a background image? 相关的示例 + 2 个其他方法：

html,
body,
.bg-for-1 {
  height: 100%;
}

.bg-for-1 {
color:white;}

.bg-for-1 .first {
  display: flex;
  flex-flow:column;
  justify-content:center;
  align-items: center;

  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/id/1015/6000/4000);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-for-1 .first h3 {
  color: white;
  position: relative;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="bg-for-1">
  <div class="first">
    <h1>Nice Portfolio!</h1>
    <h3>Find something for you!</h3>
    <button class="btn btn-danger mt-3">Press</button>
  </div>
</div>

<div class="second">
  <h3>Lot of amazing projects for you and your team!</h3>
  <h5>Just simply and nice projects for you and your team , check what we recomandate for you, we work fast and clear.</h5>
  <button type="button" class="btn btn-dark mt-5">Press And Check!</button>
</div>

<div>new div goes on previous</div>

Answer 2

在 css 中将 contain 用于 background-size。

.bg-for-1 .first {
  ...
  background-image: url(http://digitalresult.com/wp-content/uploads/2016/06/beautiful-reflection-at-lake-pier-wallpaper-32.jpeg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  ...
}