使照片变暗超出文字范围

如何解决使照片变暗超出文字范围

我需要使照片变暗，但是如果按照以下方式操作，我也会使文字和按钮变暗。 如何在没有文本的情况下调暗背景？有提示吗？

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

解决方法

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

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.5),rgba(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>

,

文本必须与要变暗的元素放在单独的容器中。

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