How to add a black overlay on picture using html and css

Question

I have been searching around on how to add a black overlay like an example: https://ocean19.com/wp-content/uploads/2017/04/black.jpg

but only using html and css. I have tried many ways but i still failed. Is it possible to only use html and css or should i also use javascript and other things?

My current code :

html:

<div class="container">

    <img src="image/head1.jpg" class="center-fit">

    <div class="centered">Centered</div>
</div>

css:

.container {
  position: relative;
  text-align: center;
  color: white;
  height:100%;
  display: grid;
}

 .center-fit {
    width: 100%;
    max-width: 1903px;
    max-height: auto;
    position: absolute;
    margin-left: -8px;
    background: rgba(0, 0, 0,1);
}

Answer 1

You can achieve this by using pseudo elements ::after

body {
 margin: 0;
 padding: 0;
}
.centered {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 font-size: 45px;
 text-transform: uppercase;
 z-index: 10;
}
.container::after {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.47);
}
.container {
    position: relative;
    text-align: center;
    color: white;
    height: 100%;
    display: block;
}
.center-fit {
    width: 100%;
    display: block;
}

<div class="container" > <img src="https://preview.ibb.co/k2cREc/banner_about.jpg" alt="" class="center-fit">
  <div class="centered">Centered</div>
</div>