Jump to content
Labtec

Reducing opacity while maintaining full opacity for content

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...