CSS3 Opacity
Need for Handling Transparency:
Before the introduction of features in CSS3 for handling transparency of images the web design though took over in various aspects had a great limitation embedded in it. That is the print design can handle overlaying of text on a background which could either be an image or color background.
This overlaying of text on background ability have the print design the ability of giving fading of text effect in the background and thereby handling the feature of transparency of images. But in contrast the web design lacked this powerful ability before the introduction of features in CSS3 which was handled in CSS3 by its powerful feature of opacity.
What is Opacity in CSS3:
Opacity is actually a property of CSS3 which gives its the ability to change the opacity of web design objects or elements and thereby make the element achieve the effect of fading and appearing thereby handling transparency of images. In short opacity is actually a property introduced in the version of CSS3 which would help users to define and handle the transparency of images on web screen with respect to its background.
Structure of Opacity in CSS3:
The general syntax of the powerful feature opacity in CSS3 is as below:
opacity: <alphavalue> | inherit
In the above the alphavalue denotes any value in the range from number 0.0 to 1.0 inclusive of both. In this the number 0.0 denotes fully transparent image which means that the background image to the element would be completely visible and number 1.0 denotes fully opaque which means that the background image to the element would be completely invisible. The default initial value is 1.0.
For example
opacity:1.0
The above example denotes the transparency of element to be completely opaque thereby making all the background images below the element defined to be completely invisible.
The option inherit is optional which if included denotes that the opacity property of the element defined should be maintained in the same way as that of its parent opacity. The opacity feature is handled and supported by Netscape browsers and is not supported by non-Mozilla browsers and is also not supported by Internet Explorer6 and Internet Explorer 7. The above statement may put the users feel that Internet Explorer being famous browser could not handle opacity property making it less powerful ability. But it is not so because though Internet Explorer does not support opacity property of CSS3 it supports an equivalent property alpha filter which is a property of Microsoft. The alpha filter property of Internet Explorer takes any value in the range from number 0 to 100 inclusive of both. In this the number 0 denotes fully transparent image which means that the background image to the element would be completely visible and number 100 denotes fully opaque which means that the background image to the element would be completely invisible. Thus it now clear from the alpha filter property that if one wants to handle transparency of images in CSS3 using Internet Explorer then they must multiply opacity by 100 and add the corresponding alpha filter.
So the general syntax for handling transparency of images in CSS3 using Internet Explorer property of alpha filter is as below:
filter: alpha(opacity=value);
The Mozilla-based browsers also support the property of opacity of CSS3 but some of the Mozilla-based browsers use the syntax with keywords as
-moz-opacity
for handling opacity property of CSS3
Apart from the above representation placement position also has to be specified along with the sytax of opacity definition. The placement position supported by Internet Explorer and Mozilla-based browsers is float:left
An example of the representation is given below:
<span style="float:left;filter:alpha(opacity=30);-moz-opacity:.30;opacity:.30;">
One more feature which makes using opacity property powerful is the way or syntax of opacity property is convenient to handle. This is because one can use the same value for rgb but still can achieve shades in images by using the opacity property defined in CSS3 instead of achieving different shades by giving different values for rgb which is inconvenient for users to handle. The example given below explains this in detail.
Defining using opacity property of CSS3 takes the below format:
<div style=" background: rgb(255, 0, 0) ; opacity: 0.1;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.3;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.5;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.7;"></div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;"></div>
Instead of inconvenient way of handling using rgb without opacity property as shown below:
<div style=" background: rgb(241, 182, 178) ; "></div>
<div style=" background: rgb(243, 152, 132) ; "></div>
<div style=" background: rgb(247, 86 , 84) ; "></div>
<div style=" background: rgb(251, 35, 40) ; "></div>
<div style=" background: rgb(255, 0, 0) ; "></div>
The above concepts and effects of transparency which we applied for background images of elements defined can also be applied to elements transparency. That is the user can define the opacity in the same way for the image or element directly which will make the element to fade and appear in and out of the background. Let us see an example to understand this concept of handling transparency for background images in detail:
<img src="http://exforsys.com/sample/test/training.jpg"
style="opacity:0.3;filter: alpha(opacity=30) ;" />
