SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Transparency

    Is there a way to make an element background color semi transparent?

    something like:

    Code:
    .test {background-color: transparent(50%);}
    Wavelan

  2. #2
    SitePoint Guru sowen's Avatar
    Join Date
    Feb 2001
    Location
    Stockport, UK
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can make element semi transparent but it's IE(5.5+) specific.

    http://msdn.microsoft.com/library/de...attributes.asp

  3. #3
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i checked that link and couldnt seem to find any info on it

    could you give me a coding example
    Wavelan

  4. #4
    SitePoint Guru sowen's Avatar
    Join Date
    Feb 2001
    Location
    Stockport, UK
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can play with all the IE specific filters here.

    http://msdn.microsoft.com/workshop/s...o/DXTidemo.htm

    The copy the resulting code

    Hope that helps
    Simon

  5. #5
    SitePoint Zealot infoxicated's Avatar
    Join Date
    Jun 2001
    Location
    UK
    Posts
    140
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A better, cross browser way of creating this effect is to create a gif, 2px by 2px and set the top left & bottom right pixels to a contrast color. The remaining two pixels should be transparent - like a checkerboard.

    Then set this tiny gif as the background to the DIV you need the transparency effect for.

    It works pretty well if you use a pastel shade as your contrast color.

    Give it a whirl and see

    A word of warning, though - if you're applying this on large areas, it can make the page rendering jerky when the user scrolls.

    Best of luck with it.

  6. #6
    SitePoint Addict michaelwheaton's Avatar
    Join Date
    Jan 2001
    Location
    Alberta, Canada
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The method infoxicated mentioned works great, definately give it a try. You can also experiment with small stripes, dots, or any other shapes you can make with little pixels. To fix the jerky scrolling he described, just use a larger image - say 60x60. A slighly larger image, but it's easier on the browser and will work much better than a 2x2.

    Good luck!
    Mike


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •