ジャンボトロンの背景画像だけを暗くする方法

Question

私はバックグラウンド画像を持つジャンボトロンを持っています。
-webkit-filter：brightness（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

background-image

background-image: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) , 
    url("Your URL"); 

---

.jumbotron { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)), url("https://upload.wikimedia.org/wikipedia/commons/3/38/Tampa_FL_Sulphur_Springs_Tower_tall_pano01.jpg"); 
 
    height: 500px; 
 
    width: 100%; 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    -webkit-filter: brightness(100%); 
 
} 
 

 
.jumbotron img { 
 
    -webkit-filter: none; 
 
} 
 

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

 
.column { 
 
    position: relative; 
 
} 
 

 
.img-out { 
 
    position: relative; 
 
} 
 

 
.img-text { 
 
    position: absolute; 
 
    top: calc(45% - 24px); 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    font-size: 24px; 
 
    vertical-align: middle; 
 
    color: red; 
 
    font-weight: 900; 
 
}

<section> 
 
    <h2 class="section-title" style="word-wrap:break-word;"> <span id="section32"> </span> APARTMENTS</h2> 
 
    <div align="center"> 
 
    <img id="divider" src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/US/MAR2016/prestige-587705839_full.jpg"> 
 
    </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"> 
 
     <div class="img-out"> 
 
      <img id="sub" src="https://html5box.com/html5lightbox/images/lakeandballoon.jpg" style="width:70%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> 
 
     </div> 
 
     <div class="img-text"> 
 
      <p>TEXT 1</p> 
 
     </div> 
 
     </div> 
 

 
     <div id="sub" class="column"> 
 
     <div class="img-out"> 
 
      <img id="sub" src="http://eskipaper.com/images/image-2.jpg" style="width:70%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> 
 
     </div> 
 
     <div class="img-text"> 
 
      <p>TEXT 1</p> 
 
     </div> 
 
     </div> 
 

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

Answer 2

にわたって暗い効果を示す画像です。

background-image: rgba(0, 0, 0, 0.4), url("apartment.jpg"); 

background-imageには複数の値を指定できます。

Answer 3

の重複については、これはあなたが探しているものですどのように？背景画像コンテナをスタイリングするのではなく、：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>