how to change opacity of background without affecting the opacity of elements inside it?

Question

I have inserted an image for background but it makes it difficult to read the text. so I want to put a semi-opaque background for that division. But if I change the opacity using css then the button, text, input field, everything inside the 'div' becomes blurry
how do i solve this problem?

Answer 1

Style the image independently (by wrapping it in it's own div) and apply the opacity property to it, then attempt to overlay your text on the div.

https://stackoverflow.com/questions/10422949/css-background-opacity

Code Ninja Added the reference ^

Answer 2

You can use rgba() values (where "a" stands for "alpha") instead of normal hexadecimal code ;)

For example:
some_element {
background: rgba(32, 32, 32, 0.3);
/* 0.3 defines low opacity */

color: rgba(225, 255, 255, 1);
/* opacity: 1 i.e., opaque white color */
}

Answer 3

Rahul thank you, that worked perfectly.

Answer 4

Fermi thank you

Answer 5

I was looking for this, Thanks