O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

20Using Cross-Browser Opacity

We saw how browsers can be awkward in the previous task, needing different ways to define rounded borders. However, the differences don’t stop there. Changing the opacity of something is simple in Firefox, Safari, and Opera because of this handy function: opacity. Opacity in most browsers is defined from 1, meaning fully opaque, to 0, meaning completely invisible.

Life’s never so simple, though. Internet Explorer requires us to use a different method—something called filter. It takes a value between 0 and 100 instead, in this style:

 
filter​: ​alpha(opacity = 60)​;

Depending on how you view opacity, either the 0--1 or the 0--100 scale can be more logical. It’s pretty easy to convert between the two.

What To Do... ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required