Jump to content

Reducing opacity while maintaining full opacity for content


Labtec
 Share

Recommended Posts

Hi there,I have a main container where all my content goes (via PHP).How can I slightly reduce the opacity of the main container (so I can see the background image) but still able to see the container slighly.Everytime I set the opacity down, the content and text opacity is reduced too (or outputs like that, not sure if it will inherit the background automatically?).Exactly like the headers in this website: http://www.advertisingbusiness.org/2012/10/what-should-i-include-on-header-of-my-website-how-website-header-can-help-conversion-rates/Any suggestions?Thank you for your time.Kind regards,Lab.

Link to comment
Share on other sites

They are using a transparent image, you will have to do the same, or use css3 background-color:rgba(); but will have to watch out for browser support, use empty position: absolute container, within content container using position: relative; make it fill entire content area, and apply required background color with opacity/filter(IE) to this, replacing content background.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...