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

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

在 css 中对 background-size 使用 contain。

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

Answer 2

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

与 + 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>

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

How to fix an issue with background-image opacity causing text to be unreadable?

css

background-image

opacity