Cross-Browser Compatible CSS Opacity

Comments

1. plasebo

   The only drawback with CSS opacity is that the text inside the div is blurred as well. Adding more opacity to the text inside the dic container do not solve the problem.

   css-tricks.com doucmented this issue and found a solution to this problem.

2. Leith Bade

   For IE 8 that code needs to be changed to:

   .show-50 { -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); opacity:.50; }

   And to support old 1.x versions of Safari:

   .show-50 { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); opacity:.50; }

   See http://blogs.msdn.com/ie/archive/2008/09/08/microsoft-css-vendor-extensions.aspx

3. Victor De la Rocha

   Thank you very much! :)

4. kovshenin

   Thanks. Helped a lot ;)

5. Pierce O' Broin

   Thanks for the suggestion but this rule can BREAK IE. I used it in conjunction with a large amount of javascript (and jquery) and it apparently caused a memory leak. BEWARE!!!!

6. Rich Boy

   So, how exactly do I use this?

   .show-50 – How can I apply this to specific tags? If I change it to .opaque-text {css here} will it work, or does that .show-50 part make it work?

7. Ross Bearman

   Rich, the .show-50 is simply the class name, you can change this to whatever suits you. To implement this you’d use the following HTML:

   <div class=”show-50″>Content</div>

   Where “Content” is whatever you want in the container. If you changed the CSS to .opaque-text, you’d simply use:

   <div class=”opaque-text”>Content</div>

8. ajay

   heiy…it’s work for in all my testing browsers (firefox, IE:using IETester,opera,safari windows and chrome). thanx david! :)

9. Paul

   This is pretty well documented and used often. It’s a cool feature that deserves attention, but calling it “overlooked for quite some time” is stretching too far in my opinion.

10. Tony

    Neat, but does not comply to standards. Using a semi-transparent 1×1 px gif and a little absolute positioning does the trick for me :)

11. Leo

    To make it AND valid, AND ok for IE, AND ok for Safari, AND ok for moz, AND etc….

    /**/

    
    

    (I hope all the code came trough)

12. Search Engine Optimisation

    Just tried this on a website i’m building

    It worked fine in mozilla firefox, chrome and safari and all varients of IE

    However the text inside the container that has opacity also has opacity which is unwanted

    Whats more, in IE the clear type effect is remove

    It would be good if you had a solution that also tackled that :)

13. oneofthem

    @Search Engine Optimisation:

    Whatever is inside the container, just select it with css and set the opacity to 1.0

14. IH8DIVS

    If you want text to appear and make an image transparent use the above mentioned style in the img tag and not in a surrounding div tag

    Content Text Goes Here.

    That should take care of your text problems inside the div

15. IH8DIVS

    ok that didnt show up.. lets try this…just take teh spaces out.

    If you want text to appear and make an image transparent use the above mentioned style in the img tag and not in a surrounding div tag

    Content Text Goes Here

16. IH8DIVS

    part 3 ? Replace [ ] with

    [div]
    [img src='name.ext' alt='tool_tip' border='0'
    style=' -khtml-opacity:.50;
    -moz-opacity:.50;
    -ms-filter:”alpha(opacity=50)”;
    filter:alpha(opacity=50);
    opacity:.50;']Content Text Goes Here.
    [div]

17. IH8DIVS

    You could also write the style in your style sheet and add the class to the img tag
    [img src='name.ext' class='show-50' border='0' alt='tool_tip']

18. Juan Mendes

    @Tony: Semi-transparent 1×1 gif? Gif does not support alpha transparency. You have to specify which colors will be transparent. Can you provide more insight on how you make a div look dimmed with a gif?

19. Arthur

    @Tony: Too bad gifs only support boolean transparency.

20. Arthur

    @Juan Mendes: He’s likely mistaking it for a png, which does work—except for our buddy IE6. But its likely you’d already got a png fix going on so it should be too tricky.

21. Doug

    @Tony: Not sure how you’re achieving this but due to the matting on GIFs you cannot achieve alpha transparency. The only way you can achieve true transparency in a fully rendered image is by using 24bit PNG files however this is not support by IE6 (as usual!) without using the (well documented) IE PNG transparency behaviour hack which uses all sorts of gubbings like CSS and javascript… which, if memory serves, also isn’t standards compliant! :)

22. Tomás

    @Tony: That only works for backgrounds, and it must be a png, because there aren’t semi-transparent gif’s.
    If you want to make the text or the images transparent, how do you do it?

    You’re right, it doesn’t comply to standards… =(

23. First Vita Plus

    This code works fine for IE8

24. irvin

    how can we solve browser compatibility on css in the ei tester

25. Brad

    Setting a background color using rgba is another good solution as it won’t affect children.

26. Jeremy Hawes

    Also, if you use opacity for a drop down it may be invisible, but the links still work :(

27. Calibron

    Someones may encounter with background transparency due to affecting child elements. I found this solution, it may be useful.

    http://mron.us/web-development/css3/css-background-transparency-without-affecting-child-elements