« Microsummary Generator plugin for Wordpress
Oracle Exception Handling »

Transparent DIV SPAN for all browsers

16th July 2006, 07:17 pm

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

10 Comments

  1. Cale:

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

    31 October 2006, 7:06 am

  2. Marcos Buarque:

    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.

    23 May 2007, 11:56 pm

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

    […] Transparent DIV SPAN for all browsers | Can Erten - […]

    25 July 2007, 9:45 pm

  4. Peri:

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

    Many thanks :)

    6 March 2008, 11:49 pm

  5. Peri Net » [CSS] Membuat Layer DIV Transparan yang Sukses di Semua Browser:

    […] Terimakasih Can Erten! […]

    7 March 2008, 12:11 am

  6. Can:

    You are very welcome indeed. :)

    7 March 2008, 2:08 pm

  7. Hebbarus:

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

    18 March 2008, 7:17 pm

  8. Johnny Russell:

    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.

    22 March 2008, 5:54 am

  9. riri:

    thanks, simple & easy, it’s works!

    23 April 2008, 10:44 am

  10. Chris:

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

    12 June 2008, 1:13 pm

Leave a comment