Css3 opacity: transparency of an element in css
The css3 property opacity allows to change the transparency of an element.
The property opacity needs a value in between 0.0 (equal to 100% transparency) and 1.0 (no transparency).
Example for a css transparency of 60%:
opacity: 0.6;
opacity is not supported by Internet Explorer for which we can use the property ‘alpha filter’ implemented by the Microsoft.
This property ‘alpha filter’ needs a value in between 0 (completely transparent) and 100 (no transparency).
Example of the ‘alpha filter’ for a transparency of 60%:
filter: alpha(opacity=60); /*for Internet Explorer 6/7*/
filter: “alpha(opacity=60)”; /*for Internet Explorer 8*/
NB: Internet Explorer 8 requires a Doctype in Strict mode to work
Next, I created a few examples of the property opacity for images, hover effect and text. Attention that for the last example with the text, Internet Explorer requires other parameters to render the effect of transparency properly.
1. Opacity of 50% on a image:
The css rules:
img{
opacity:.50;
filter:alpha(opacity=50);
filter: “alpha(opacity=50)”;
}
2. Opacity of 100% on a image, equal to no transparency, only to demonstrate the effect of the maximum value:
The css rules:
img{
opacity:1;
filter:alpha(opacity=100);
filter: “alpha(opacity=100)”;
}
3. Effect of the opacity from 100 to 40% on the hover state:
The css rules:
a:hover img{
opacity:.40;
filter:alpha(opacity=40);
filter: “alpha(opacity=40)”;
}
4. Effect of the opacity from 40 to 100% on the hover state:
The css rules:
a img{
opacity:.40;
filter:alpha(opacity=40);
filter: “alpha(opacity=40)”;
}
a:hover img{
opacity:1;
filter:alpha(opacity=100);
filter: “alpha(opacity=100)”;
}
5. Difference between a normal text and a text with opacity of 60%:
The css rules:
I impost a font measure of 2em (200%) to better see the effect:
p.opacity{
font-size:2em;
The following to lines are necessary for Internet Explorer…
I impost a width of 100% as Internet Explorer does not apply the effect to a text if a width or height is not specified o also if the text is not positioned such as with the float.
width:100%;
Still for Internet Explorer, I impost a white background. With no background color, the edgess of the text are slightly distorted. Adding a color to the background correct this problem with IE.
background-color: #FFFFFF;
The opacity effect as explained before:
opacity:.60;
filter:alpha(opacity=60);
filter: “alpha(opacity=60)”;
}
The result:
Css property opacity 100
Css property opacity 60
Note: for older browsers version was in use the equivalent css3 ‘-moz-opacity’. Its use is no longer necessary.
Last update: May 2009
About The Author
Jürgen Jeka
Hello,
I think “-moz-opacity” is dead and useless these days. Browsers since Mozilla 1.7.1/ Firefox 0.9 (June 2004) are fine with plain “opacity”. Firefox 3.5 drops support for “-moz-opacity” completely.
See https://developer.mozilla.org/en/CSS/opacity
j.j.
Jürgen Jeka
btw, IE8 in strict mode supports filter values only in quotes:
filter: “alpha(opacity=60)”
Onsitus
Thank you for the update. I modified the article!
cba
try to validate some of this code in the css3 validator ( http://www.w3c.org )
Nand Kishor Singh
Nice article… thank u so much
Nayith
Muchisimas gracias parcero, exelente ayuda, aunque no funciona en IExplore
pero bien 
Affan
nice one. still learning css.
Shrikrishna Meena
Opacity is a good Inclusion in css3, The second method I tried is to create an 1px gradient image and repeating it in x-axis or y-axis….
The repeating image produces a better effect … But can’t used everywhere… Thanks to CSS developers for introducing this in their standards.
Daus
nice tutorial, thanks for sharing css.flepstudio
Blogwap
Great.. Thanks for your tutorial.
Anil
Thank you
Joshua
I can not see a diference between 60 opacity text and 100 opacity text in the example given.
OnLine
Hy,
Thank you for this article.
The text with opacity 100 and 60 seem equal.
Wiloooo
thank for this share
Saurabh
IE opacity problem?
how to solve it ?
Dimitri
hi, maybe you can help me. I have a div with opacity applied and have images within. I want to avoid to apply opacity also to the inner images(what unfortunately happens), only the div (background) has to have the opacity. thanks if you answer me dimitri
Madhukar Adhikari
hi when i use pie.htc fo border radius same time on same div not working box opacity how 2 solve this problem
Bryant Zedian
I’ve learn some good stuff here. Definitely value bookmarking for revisiting. I surprise how so much effort you set to create this kind of wonderful informative site.
Tennille Larish
Just wished to write and inquire where you bought your template? I’m shopping for one for my current blog and really appreciate yours. Many thanks.