css opacity without affecting the content


#1

Please how do i write a css rule for a background to have opacity such that the opacity will not affect the content i’ll place on the background. e.g is my background color is white with opacity 0.5, i need the content to be 1, i dont want to css rule to affect the content. thank you.


#2

Post your code sample here.


#3
All contents comes here

CSS
#cover { background: url: images/bgr; opacity:0.5; }
#inner-content { all kinds of css rules; }

i want the opacity rule to affect only #cover, it should not affect the content


#4

Have you tried overriding the parent opacity property in the child?

e.g:
#cover { background: url: images/bgr; opacity:0.5; }
#inner-content { opacity:1; all kinds of css rules; }

since you are using ID selector, it shud work.


#5

i just found out that i didn’t use background image for the cover, i used background color, but i ll still try what you wrote out. Thanks