A Web Design Community curated by Chris Coyier

A little dab'll do ya

Code Snippets

Home » Code Snippets » CSS » Cross Browser Opacity Submit one!

Cross Browser Opacity

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

Subscribe to The Thread

  1. DN says:

    Actually missed the IE8 opacity brouhaha. Thanks for including that!

    • abajan says:

      Yep. I didn’t know about that one either. The only issue I have with this snippet is that it’s not valid CSS.

      Nevertheless, I’m gonna use it.

  2. FJ says:

    attention – sequence

    .yourselector {
    background:#000;
    opacity: .75; /* standard: ff gt 1.5, opera, safari */
    -ms-filter: “alpha(opacity=75)”; /* ie 8 */
    filter: alpha(opacity=75); /* ie lt 7 */
    -khtml-opacity: .75; /* safari 1.x */
    -moz-opacity: .75; /* ff lt 1.5, netscape */
    }

  3. If you want opacity to also work in IE8′s emulating IE7 mode, the order should be:

    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // first
    filter: alpha(opacity=50); // second

    If you don’t use this order, IE8 emulating IE7 doesn’t apply the opacity, although IE8 and IE7 native do.

  4. Mike says:

    What about keeping the text inside the layer normal?

    • Mike2 says:

      yeah! I’m wondering how to do this too..

    • Jim says:

      If you set a parent container to an opacity less than 100%, all of its children will also be less than 100%, not because it cascades, but because the parent is dimmed. If the parent is dimmed to 75%, even if you give the child 100% opacity, it will only be 100% of 75%, which is 75%.

      What I do is just use a semi-transparent PNG as a background image for the parent, and then the children can have full opacity.

      inb4 IE6 doesn’t render 24bit pngs… Eff ie6, I’m done pandering to ie6, and enabling everyone who still uses it. The use of a semi transparent png is not going to break the site, but it will certainly affect the prettyness, which is all the more reason for people to upgrade.

  5. James says:

    You need to prevent the style from cascading… you need to wrap your text in an element with an opacity of 100.

  6. I find that I use this snippet more than any other on the site. Thanks! =D

  7. Is this ok for IE9?

  8. Beben Koben says:

    thanks for update coded^^

  9. asdasdasd says:

    Awesome “Submit Comment From”. Congratulations, the best i have ever find surfing in the internet world for years…

    But I have one question…
    Why all of you “webmasters”, keep asking email , hum??? If i want an answer I just put my email or even better I contact you. If not I will just SIMPLY LIE! And use one like this one: dfbjhsbdjfhbsdjfhbdsjhfbsd@gmail.com
    Take off this “required fields”. I hate this mass standardization and globalization, it’s so kitsch and so predictable, is a false sentence to evoke a mystified concept from it.

  10. Chase says:

    Webmasters ask for emails to help identify spam, as well as uniquely identify users. If you don’t want to enter your email, then have faith that your posts will be removed as spam, and that you really can’t contribute, because you’re not anything more than a few “asdf”s

  11. Your Mom says:

    I LOLD when i read the “good browsers” thing

  12. Buat Info says:

    good information, very helpful. Thanks..

It's Your Turn

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
--- The Management ---