html - 如何仅使超大屏幕背景图像变暗

Question

我有一个带有背景图片的超大屏幕，我放了一个
-webkit-filter:亮度(30%)；在背景图像上，但这种效果也会影响超大屏幕中的所有其他图像和文本，我正在尝试仅使背景图像变暗，而所有其他文本和图像变亮，任何人都可以帮助我

.jumbotron {
  background-image: url("apartment.jpg");
  height: 500px;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: brightness(30%);
}

img#sub {
  padding: 5px;
  border: solid 1px #EFEFEF;
  height: 100%;
  width: 100%;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  border: solid 1px #CCC;
  -moz-box-shadow: 1px 1px 5px #999;
  -webkit-box-shadow: 1px 1px 5px #999;
  box-shadow: 1px 1px 5px #999;
}

<section>
  <h2 class="section-title" style="word-wrap:break-word;"> <span id="section32"> </span> APARTMENTS</h2>
  <div align="center">
    <img id="divider" src="divide1.png">
  </div>


  <br></br>

  <div class="jumbotron">
    <h2 style="text-align:center">Apartments</h2>

    <div align="center" class="container-fluid" id="ab">
      <div id="sub" class="column">
        <img id="sub" src="8.jpg" style="width:70%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
      </div>

      <div id="sub" class="column">
        <img id="sub" src="10.jpg" style="width:70%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
      </div>

    </div>
  </div>
</section>

下图显示了整个黑暗效果 image

Answer 1

这是您要找的吗？我没有设置背景图像容器的样式，而是向其添加了一个 :before 伪元素，并使用 rgba 将其设置为具有 50% 不透明度的黑色覆盖层。

.jumbotron{background-image: url("http://placekitten.com/1000/700");
  height: 500px;
  width: 100%;

  background-position: center center;background-repeat: no-repeat;background-size: cover;
  position: relative;
   }
.column {
    display: inline-block;
    margin: 5px;
}

img.subImg {
  padding: 5px;
    border: solid 1px #EFEFEF;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 10;
    width: 300px;
  }

.jumbotron:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.5);
}

img.hover-shadow {
  transition: 0.3s;     
}

.hover-shadow:hover {
  border: solid 1px #CCC;
    -moz-box-shadow: 1px 1px 5px #999;
    -webkit-box-shadow: 1px 1px 5px #999;
        box-shadow: 1px 1px 5px #999;
}

<section > 
    <h2 class="section-title" style="word-wrap:break-word;" >  <span 
    id="section32" > </span> APARTMENTS</h2>
    <div align="center">
        <img id="divider" src="divide1.png"  >
    </div>
    <div  class="jumbotron">
         <h2 style="text-align:center">Apartments</h2>
         <div  align="center" class="container-fluid" id="ab">
            <div id="sub1" class="column">
              <img class="subImg" src="http://placekitten.com/500/300" 
    onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
            </div>

            <div id="sub2" class="column">
              <img class="subImg" src="http://placekitten.com/500/300" 
    onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
            </div>

          </div>
        </div>
    </section>