why may image is not darken? HTML CSS-CodePudding

I'm trying to darken my image by applying black colour with an opacity of 0.7 on top of my image using :after in CSS. However, it doesn't seem to be working for me? any advice/suggestion for it -> this image will be my background for the main page of my website

.home__img {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.home__img::after {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    background-color: rgba(0, 0, 0, 0.7)
}

<section  id="home">
    <img src="https://images.unsplash.com/photo-1526675849333-144a81e4670d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=775&q=80">
</section>

CodePudding user response：

you can save the image link in css

.home {
    background: rgba(0,0,0,0.7)url("https://images.unsplash.com/photo-1526675849333-144a81e4670d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=775&q=80");
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-blend-mode: darken;
}

<section  id="home">
</section>

CodePudding user response：

try

img {
  filter: brightness(30%);
}

and also as stated in comments, no element is part of the home__img class.

CodePudding user response：

Applying opacity seems like its working. I edited your css. See if this will work for you.

.home > img {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    opacity:.3;
}

.home > img::after {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;

}

<section  id="home">
    <img src="https://images.unsplash.com/photo-1526675849333-144a81e4670d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=775&q=80">
</section>