Sudo Chocolate Posted March 19, 2015 Share Posted March 19, 2015 I have been building a website that I like but it is a little bit 'busy' looking. I have a background image (a picture of bark) with multiple boxes floating on it with the info. For example, I have a boxs for navigation, one for the title, and one eith the article. They are spaced out so you can see the bark background through the cracks. I like this but it distracts from the main information in a way I dont want. How can I suround these boxes with a semi transparent white so that you can only lightly see the image through it. I still want the picture to be clear on the edges just have the 'fog' in the center. i tried putting them in an element that has the opacity set down but that affects all child elements. How can i do this but keep the inside text fully clear? Link to comment Share on other sites More sharing options...
Ingolme Posted March 20, 2015 Share Posted March 20, 2015 You can use an RGBA background color. If you use RGBA, be sure to also specify an ordinary RGB color for browsers that don't support RGBA, like this: background-color: #FFF; /* for older browsers */background-color: rgba(255, 255, 255, 0.5); Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now