CSS BACKGROUND OPACITY

CSS (Cascading style sheets) is a language used to describe look and formatting of HTML documents. CSS is designed to be used to separate document content and document formatting. The most common use of CSS is to style the web pages written in HTML and XHTML.

There are various levels and profiles of CSS. Each level of CSS is an incremental release, which adds new features and is denoted as CSS1, CSS2, and CSS3. The profiles are mainly a division of one or more levels of CSS developed for a particular device or user interface. Presently there are profiles for printers, mobile devices and television sets.


The CSS syntax consists of three parts:
• A selector
• A property
• A value

Example: selector {property: value}


What is CSS Background opacity?

One of the things that can be done with no difficulty in print design, but not on the Web is superimposing text on an image or colored background, and changing the transparency of that image so that the text fades into the background. The problem can be solved with help of CSS Background opacity which has a property in CSS 3 that will allow you to change the opacity of your elements so that they fade in and out.
The opacity property takes a value of the amount of transparency from 0.0 to 1.0. 0.0 is 100% transparent - anything below that element will show completely through. 1.0 is 100% opaque - nothing below the element will show through.
So to set an element to 50% transparent, you would write: opacity: 0.5;
A few points to remember about CSS Background opacity is:


 Neither Internet Explorer v6 nor v7 support the CSS 3 opacity property. Instead, IE supports a Microsoft-only property "alpha filter". Alpha filters in IE accept values from 0 (completely transparent) to 100 (completely opaque). So, to get your transparency in IE, you should multiply your opacity by 100 and add an alpha filter to your styles:

filter: alpha(opacity=50);


 For some older Mozilla browsers you need to use the property "-moz-opacity" to change the transparency. It works the same as the CSS 3 property.

-moz-opacity:0.5;

 You can also make Images transparent too by setting the opacity on the image itself and it will fade into the background. This is really useful for background images.
Here is an example for CSS Background Opacity in Action








A)


B)




A)

B)

Note: You can notice the difference in the code between the first row, which uses the same color value for each row, combined with an opacity value, and the second, which uses RGB values: