<img src="https://www.travelsouthdakota.com/sites/default/files/styles/hero_l/public/2019-10/mtrushmorebychadcoppess_3.jpg?h=7549df8d&itok=oVEm9ks_" />
<img src="https://www.travelsouthdakota.com/sites/default/files/styles/hero_l/public/2019-10/mtrushmorebychadcoppess_3.jpg?h=7549df8d&itok=oVEm9ks_" class="darken" />
<div class="bg">With BG Image</div>
img { width: 40%; margin: auto;}
img.darken {
filter: brightness(50%);
}
.bg {
margin: 2rem auto;
outline: 1px solid orange;
height: 25vh;
width: 40vw;
background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(https://www.travelsouthdakota.com/sites/default/files/styles/hero_l/public/2019-10/mtrushmorebychadcoppess_3.jpg?h=7549df8d&itok=oVEm9ks_);
background-size: contain;
color: #fff;
}
/*
Question
https://www.sitepoint.com/community/t/is-there-a-css-and-or-js-hack-to-effect-the-darkness-of-a-background-image-directly/432222 */
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.