Argthtjtr

I have an image class named image and a div named semitransparent.

i want to create a semitransparent background color in css, so that the image in image class can be seen through it

How to create this semi transparent color in css?

.semitransparent{

width:300px;

height:300px;

}



.image{

background-image:url(https://picsum.photos/200/300/?random);

width:300px;

height:300px;

}

<div class="semitransparent">

<div class="image">

</div>

</div

You could use "position:absolute" to place the overlay - you'd need to find the position on the document and dimensions. But that can get annoying since you'd have to keep fixing it up as soon as the window dimensions change.
Have you heard of css-filter:blur?
Just have a class

.blur{ filter: blur(4px) }

and then add/remove that class to your image. Oh, wait .. not supported widely enough :-/

Depending on constraints you may have or could enforce there are a number of approaches to avoid having to fix up your overlay to keep matching the underlying elements position/dimensions.

.overlay{ position: absolute; width: 300; height: 300 }

.image{ position: relative; }

Then place the overlay inside the image DIV.

<div class="image"><div class="overlay"></div><img src="…" …></div>

It can be done using following code -

<div class="image">

    <div class="semitransparent">

    </div>

</div>



.semitransparent {

    background: black;

    opacity: 0.5;

    position: absolute;

    top:0; left:0; right:0; bottom:0;

}



.image {

    background-image:url(https://picsum.photos/300/300/?random);

    width:300px;

    height:300px;

    position: relative;

}

Fiddle link - https://jsfiddle.net/Lvhwmy31/

The thing is, the way you've started it.. it is not possible to make child element above the parent with z-index, what would be an obvious try of course.

It's sort of a css ninja style anyway :)

You would rather place them both as sibilings, give parent a relative, and overlay an absolute, and you're done.

    <div class="parent">

        <div class="child1"></div>

        <div class="child2"></div>

    </div>

    <style>

    .child1{

        background-image:url(https://picsum.photos/200/300/?random);

        width:300px;

        height:300px;

    }

    .child2{ 

        background-color: rgba(138, 43, 226, 0.6);

        width:300px;

        height:300px;

        position: absolute;

        top: 0px;

    }

    .parent {

        position: relative;

        height: 2000px;

    }

    </style>

check this code, Change "rgba" color while you want.

<div class="semitransparent">

<div class="image">

</div>

</div

.semitransparent{

width:100%;

height:100%;

background: rgba(0, 0, 0, 0.5);



}



.image{

background-image:url(https://picsum.photos/300/300/?image=206);

width:300px;

height:300px;



}