SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Opaque Backgrounds

    I know you can assign a background color or image to almost any element. I also know you can assign a transparent background to almost any element.

    Is there any way to control the level of transparency of higher index elements?

    I haven't seen any but haven't kept up with newer developments in the CSS world.

    Basically what I want to do is create a navigation bar with a 50% opaque colored background over a graphical background. The graphical background doesn't tile (it is 1000 X 640 pixels in size) and the element itself is liquid so creating a new background image for this element won't work.
    Wayne Luke
    ------------


  2. #2
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this maybe:
    Code:
    style="filter:alpha(opacity=75)"
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  3. #3
    Bored One boredboi's Avatar
    Join Date
    Jul 2000
    Posts
    238
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm not sure, but i think that's IE-only.
    it might work in netscape 6 though

    another alternative would be to create a background image for the nav bar, which has alternating opaque and transparent pixels.. but it doesn't look very good.

    but if there's no other way, you could have it such that you use css for IE, and the half-transparent background image for NS.

  4. #4
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All of those developments are IE-only. I don't even think the new Netscape implements them. I like the opacity look though. It's one kudos for Microsoft!

    Sketch
    Aaron Brazell
    Technosailor



  5. #5
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this in IE
    Code:
    filter: alpha(opacity=50);
    try this in NEtscape 6

    Code:
    -moz-opacity: 0.5;
    Let me know if this works as I just pulled this stragiht from the internet.

    Sketch
    Aaron Brazell
    Technosailor



  6. #6
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's being used at the Network bar (the horizontal one) of my site. It looks pretty nice but you don't need to worry that much about browser compatibility. If you have a white background set to 60%, then IE would show it correct but Netscape (and Opera?) would just show 100%. So in many cases it just doesn't mather, the visitors think it should look like that

    EDIT: I've also noticed my CSS doesn't seem to work correct in every IE version, the transperancy (sp?) doesn't work on my system but does work on my school's system. Wierd :|
    Jeroen Mulder

    w: www.jeroenmulder.com

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Location
    UK
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, transparency works in IE5, IE5.5 and IE6. But if you upgrade Direct X to 8, it stops working in IE5.5!! So you need the service pack upgrade SP2, or upgrade to IE6.

    Netscape 6.0 works, but NOT 6.1. Agh!

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This page:
    http://www.glish.com/hiatus.asp

    uses transparency for the text area at the top right.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


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
  •