« Microsummary Generator plugin for Wordpress
Oracle Exception Handling »

Transparent DIV SPAN for all browsers

16 July, 2006, 19:17

To make an HTML element transparent. Just use these css elements in your css class.  filter, moz-opacity, opacity.

Internet Explorer uses filter and firefox uses moz-opacity.

.transparent
{
   filter:alpha(opacity=60); 
   -moz-opacity: 0.6; 
   opacity: 0.6; 
}

<div class="transparent">A transparent div.
</div>

The opacity value changes from 0 to 1.

Tags: , , , , , , , ,
Category: CSS  |  Comment (RSS)  |  Trackback

17 Comments

  1. Cale says:
    31 October, 2006 at 07:06

    excellent bit of info there it really helped to make transparent divs that work on both firefox and IE thankyou :)

  2. Marcos Buarque says:
    23 May, 2007 at 23:56

    Hi, good short tutorial. What is the solution when I need the text within the DIV to be 100% opaque over, let’s say, a 60% transparency DIV? As far as I could see testing, the text gets faded in the same scale as the div even if I put a 100% opaque tag inside the DIV. Thanks.

  3. Amidala.be: insanity leads to poetry … or just a weblog. » Blog Archive » My del.icio.us bookmarks for June 5th through July 24th says:
    25 July, 2007 at 21:45

    [...] Transparent DIV SPAN for all browsers | Can Erten – [...]

  4. Peri says:
    6 March, 2008 at 23:49

    Wow, it works, excellent!
    Do you mind if I share and translate this to another language on my blog?

    Many thanks :)

  5. Peri Net » [CSS] Membuat Layer DIV Transparan yang Sukses di Semua Browser says:
    7 March, 2008 at 00:11

    [...] Terimakasih Can Erten! [...]

  6. Can says:
    7 March, 2008 at 14:08

    You are very welcome indeed. :)

  7. Hebbarus says:
    18 March, 2008 at 19:17

    Good stuff! Just what I was looking for. Works great!

  8. Johnny Russell says:
    22 March, 2008 at 05:54

    What I do if I want to make a div with a transparent background but have text show up opaque is I make two divs with identical properties. Then, I take one div, put it behind the other, and make it transparent. Then, I put all of my content in the other div. Therefore, one div is used for content and is opaque; the other div is used for the background and is transparent. That’s just what I do. There may be a better way.

    Que te vaya bien.

  9. riri says:
    23 April, 2008 at 10:44

    thanks, simple & easy, it’s works!

  10. Chris says:
    12 June, 2008 at 13:13

    Great example. I’d only note that Firefox now simply supports “opacity”, so you don’t have to use “-moz-opacity” anymore.

  11. Streusel says:
    10 July, 2008 at 18:33

    Works, but IE6 blocks “filter:alpha(opacity=60);” and shows a yellow bar so you manually have to enable it to get the visual effect… :(

    A tip to others: if you only want the bg transparent and not the contents, you better put a div just behind the div you are using where you apply a white semi-transparent background.

  12. lagreen says:
    26 July, 2008 at 18:22

    it’s just what i need :) . thanx

  13. Jakov says:
    23 September, 2008 at 15:43

    Thanks man! that I needed!!! Thanks again!

  14. jadeyaya says:
    2 May, 2009 at 22:17

    Thank you for solving my IE problem.

  15. Robbie says:
    14 June, 2009 at 07:20

    Thanks!

  16. jukarpenz says:
    21 June, 2009 at 06:39

    thank u so much bro

  17. Kirill says:
    25 June, 2009 at 18:37

    Thank you!

Leave a Reply