how to make only jumbotron background image dark - html

Question

i have jumbotron with a background image , i put a
-webkit-filter: brightness(30%); on the background image, but this effect also affects all other images and text in the jumbotron, i am trying to make only the background image dull, and all other text and images bright, can anyone please assist me
.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>
below is an image showing the dark effect all over
image

Answer 1

Is this what you are looking for? Instead of styling the background image container, I added a :before pseudo element to it, and set it to have a black overlay with an opacity of 50% using rgba.
.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>

Answer 2

How about overlapping 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 3

Try this.
background-image: rgba(0, 0, 0, 0.4), url("apartment.jpg");
background-image can take multiple values.