Kategorie: #-Status zur Sichtbarkeit

und hier ganz viel text …..

CSS Transparent Background

Today’s blog post will show you how to make a background layer half transparent, but keep the text on top as a solid color. A common problem occurs in browsers if you set a background opacity to transparent, all of the children will also become transparent. One solution in the older days was to use a png image, but we can also implement a pure CSS solution thanks to RBGa colors.

Using RGBa colors, we can set the alpha background along with an opacity value, and it will only affect the element it is applied to, not it’s children ! Sounds perfect, let’s take a look at how to implement it:

/* default fallback */
background: rgb(255, 255, 255) transparent;
/* nice browsers */
background: rgba(255, 255, 255, 0.8);

The example above will show a semi-transparent white background, and all child elements as having a solid opacity. You can see we use rgb(255, 255, 255) as the default for any browsers that might have problems using RGBa. We then use rgba(255, 255, 255, 0.8) for most modern browsers, which sets the background color to white, and a transparency level of 80%. This works fine in Chrome, Safari and FireFox 3+ etc, however our dear friend IE fails in all versions.

For IE6+, we must used Microsofts implementation of their gradient and filter properties. By using gradients combined with an 8 color HEX value, we can achieve the same semi-transparent white background as other browsers.

/* IE 6/7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)"; 

You can see the values of the start and end colors are “#CCFFFFFF”. The last 6 characters refer to the white background color, and the first 2 characters are the alpha hex value which control the opacity level. So if we want to set an opacity of 80%, we would normal use 0.8 as our value, however for alpha hex value we need to do some calculations. You can use this tool I wrote below to quickly calculate it for you. Simply enter your normal opacity value like 0.8 amd hit convert, which will give us the “cc” alpha hex value we need (“cc” in our case).

So our cross browser solution now looks like this:

/* default fallback */
background: rgb(255, 255, 255) transparent;
/* nice browsers */
background: rgba(255, 255, 255, 0.8);
/* IE 6/7 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF);
/* IE8 */    
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#CCFFFFFF, endColorstr=#CCFFFFFF)";

This should work in all browsers from IE6+, Ch