Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Transparency in all browsers

    Is there a way to use transparency so its compatible with all browsers?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    What type of transparency? Using images or CSS?

  • #3
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I was trying to put up a background image and use CSS to make the header, content and footer transparent so it would show through. I got it to work with Opera but not FF or IE.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Do you have a link by chance? If not, at least some code?

    It's possible but kind of hard to tell you how to do it if we don't know exactly what your trying to do.

    is it possible to just fake it with images instead of filters?
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Each browser really depends on their own declarations to make things transparent. So don't expect code to validate but this should provide transparency for most (if not all) current browsers.

    Code:
    khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
    opacity: 0.5;

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by mark87
    Code:
    khtml-opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
    opacity: 0.5;
    Fwiw, in most cases, if not all, using CSS opacity renders the entire element semi-opaque. This means that any text, images, etc… will also be rendered semi-opaque.

    In case that's not what the op is after…

    If the idea is purely to have a semi-opaque/semi-transparent background, then you'll need to use a PNG24 image.

    IE/Win doesn't natively support PNG24 semi-transparency, so you'll need to implement a proprietory CSS filter to kick-start the transparency in the PNG24 image.

    See:
    http://www.alistapart.com/stories/pngopacity/


    IE5/Mac has buggy support for tiling of PNG24 background images, but it's a simple matter to use the band-pass filter to supply IE5/Mac with overriding CSS that uses a single, larger, non-tiling background image which fills the background of the element.

    I'm not sure of the IE/Win filter method's support for tiling background PNG24 images, but if it's a problem, you can use the larger, non-tiling background image in the IE/Win CSS override filter as well.

  • #7
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah sorry, kind of misunderstood the question.

  • #8
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't have the code... I got frustrated and took it down. I went with something else for the time being but I may need to go back to this.

    Bill thanks for the information. I'll mark this thread and come back to it when I have some more time to tinker with it.


  •  

    Posting Permissions

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