powered by Slim Framework
enhanced by Nesbot.com

CSS3: Creating a Transparent Background

Published on Feb 20, 2012 by Jamie Munro

Do you have a nice background image that you don't want hidden by a solid color and your content?  With some CSS3, a background color can be set with an opacity value so that the content or image beneath will be visible through it.


 The best way to demonstrate this effect is with an example.  Below is an image of an element that is partially transparent allowing us to see what is behind the background.



In the above example, the outer background is solid black.  The inner background is a very light grey; however, the opacity is set to 40% causing the black to bleed through and make the grey much darker.

To accomplish this in CSS, the following code can be used:


div.outer {
background-color: #000;
height: 400px;
width: 400px;
padding: 1em;
}

div.inner {
background-color: # 918f8f;
background-color: rgba(145, 143, 143, 0.4);
height: 300px;
width: 300px;
}


The rgba function accepts four parameters, the red, green, blue, and alpha of the color.  The alpha parameter is the level of opacity between 0 and 1; 1 being completely solid and 0 being completely transparent.  In the above example, 0.4 is used to set it to 40%.

Summary


Once again CSS3 to the rescue for us again!  No longer do we need to save images as PNGs or GIFs with transparency, instead a background-color and rgba value can be used to achieve the same effect.

Tags: css3 | CSS

<- JavaScript: Set Cursor Position of textarea  Home MySQL: Concatenate Multiple Rows From a Table Into One Field -> 
blog comments powered by Disqus