使照片颜色变暗，超出文本[重复]

Question

我需要把照片变暗，但是如果我按照下面的方式做，我也会把文字和按钮变暗。没有文字怎么调暗背景？有什么提示吗？

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
    body, html {
        height: 100%;
        line-height: 1.8;
    }
    .bgimg-1 {
        background-position: center;
        background-size: cover;
        background-image: url("{{ asset('img/road.jpg') }}");
        height: 100vh;
        filter: brightness(20%);
    }
</style>

<header class="bgimg-1 w3-display-container w3-grayscale-min" id="home">
    <div class="w3-display-left w3-text-white" style="padding:48px">
        <span class="w3-jumbo w3-hide-small">llo facilis</span><br>
        <span class="w3-xxlarge w3-hide-large w3-hide-medium">llo facilis</span><br>
        <span class="w3-large">llo facilis nesciunt volupt</span>
        <p><a href="" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">llo facilis nesciunt volupt</a></p>
    </div>
</header>

Answer 1

文本需要在一个单独的容器中，而不是被变暗的元素。

.box {
  width: 200px;
  height: 200px;
  background: #000;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  color: white;
}

.box .img {
  background: url(https://images.pexels.com/photos/3150553/pexels-photo-3150553.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  filter: brightness(60%);
}

<div class="box">
  <h1>Text</h1>
  <div class="img"></div>
</div>

Answer 2

代替滤镜，您可以在顶部应用第二个线性渐变背景图像，该图像为纯色，不透明度满足您的需要：

css lang-css prettyprint-override">body,
html {
  height: 100%;
  line-height: 1.8;
  color: white; /* added to make the text easier to see */
}

.bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image:
    /* semi-opaque black overlaid on top of the bg image */
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    /* actual bg image */
    url("//placekitten.com/400");
  height: 100vh;
}

<header class="bgimg-1 w3-display-container w3-grayscale-min" id="home">
  <div class="w3-display-left w3-text-white" style="padding:48px">
    <span class="w3-jumbo w3-hide-small">llo facilis</span><br>
    <span class="w3-xxlarge w3-hide-large w3-hide-medium">llo facilis</span><br>
    <span class="w3-large">llo facilis nesciunt volupt</span>
    <p><a href="" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">llo facilis nesciunt volupt</a></p>
  </div>
</header>