rgba();

CSS3 has added a new feature to color setting. Instead of #hex values, and/or rgb values, you can now also use rgba! The “a” in this property-name stands alpha (fancy word for transparency). This new feature allows us to specify an opacity value for a color on a scale of 0-1. For example, .4 is 40%, .15 is 15%, .05 is 5%, etc. By adding transparency, this will blend with anything underneath it, including photos. Example 1  rgba(0,0,0,.5); } Flex your creative muscle, and combine it with DIVs with positioning, and you can achieve a look that you commonly see on news and magazine sites, with a black transparent box on top of a photography. Barack Obama  width: 400px; height: 274px; background-image:url('images/obama.jpg'); position: relative; /* you need this to keep the absolute positioned box inside it */ }
 * 1) Example1 {
 * 1) outerBox {

#insideBox { width: 400px; height: 50px; background-color: rgba(0,0,0,.4); position: absolute; bottom: 10px; left: 0px; font-family: Arial; font-size: 18px; color: white; line-height: 50px; /* vertically center text */ }