Articles CSS Opacity-in-all-browsers

---

tutorials - CSS and Web-Development.

Opacity in all browsers

Published Tue. Sep. 18, 2012

---

Setting transparency levels for consistensy across all browsers

This works great in all browser but all the child elements inherit the opacity setting. Meaning, the text inside will also be semi-transparent.

    /* background:rgba(0,100,150,.9); */
    background: url(../images/pinstripes-inverted.png);
   
    /* THIS ONE WORKS IN IE9 AND ALL OTHER MODERN BROWSERS */
        opacity: .9;
       
    /* THIS ONE WORKS IN IE9 AND IE8 */
    /* -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; */
   
    /* THIS ONE WORKS IN IE7 8 and 9…not sure if the zoom is needed */
    filter:alpha(opacity=90);
    /* zoom: 1; */

If you keep it set to .8 or .9 it will appear ok.

 

You can use this if there is no background image, just a color:

   background:rgba(0,100,150,.9);

Tag(s): CSS opacity