SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Opacity color by code



    Hello all.

    What I am looking for?

    - I've a background image and the text is to be written in a table with a grey color background.

    But this grey color should have an opacity, because I want the background image to be seen.


    How can I do this without an image and without using Flash? I don't know how.
    Thank you for your help.

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    The best way would be a PNG using Alpha channels. It would also be the less headache way then trying to work with opacity in CSS.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    SitePoint Zealot Shpook's Avatar
    Join Date
    May 2007
    Location
    Hollywood, FL, USA
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just remember, IE6 and under don't support PNG's Alpha channel, without some Javascript work-arounds. And even then, It doesn't work if the image is defined as a background through CSS.
    Life would be so much easier if we
    could just look at the source code.
    -Dave Olson

  4. #4
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm... I don't want to use an image. Maybe I am going to find how to do it in CSS?

    The only image here must be the background.

    Thank you

  5. #5
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    well to do it with CSS you need to add an extra div before or after the table and shim it under the table.

    Otherwise if you set the opacity on the table it will make every thing transparent including the text.

    Sure you still want to do it with just CSS?
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  6. #6
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've to try.

    If I can't I will not used a transparent item, it will be opaque.

    Thank you!

  7. #7
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <table>...</table>
    <div class="opacityshim>...</div>
    Code:
    .opacityshim {
        filter:alpha(opacity=50); 
        -moz-opacity: 0.5; 
        opacity: 0.5;
    
        background-color: #000;
    }
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    logic_earth,

    Many thanks for your help. I'm going to try it.

  9. #9
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're the ONE. It works!! Thank you.

  10. #10
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here I am again. : )

    Please have a look to the result Here

    Is it possible to put images and text with no opacity?

    I tried using Z-Index:

    Code:
    div.A {
        width: 405px;
        border: 0px;
        position:absolute;
        top: 100px;
        left: 115px;
        height: 352px;
        filter:alpha(opacity=50); 
        -moz-opacity: 0.7; 
        opacity: 0.7;
        background-color: #ccffff;
        color:#000000;
        padding: 10px;
        z-index: 1;
        }
    
    .middle {
        display: table-cell; (this is to center the image, something I also can't solve.)
        vertical-align: middle; 
        position: static;
        z-index: 2;
    }

    Thank you.
    Last edited by magi; Jun 13, 2007 at 13:39.

  11. #11
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's solve!!

  12. #12
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, back in town.

    At Safari it seems it doesn't work, people don't see anything.

    I've read this:

    Safari and Mozilla

    These browsers support opacity. It requires a fraction value, percentages are not allowed.

    The code is what you gave me and works fine at IE and FF.

    If you can help me again please check it here.




  13. #13
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Win Safari beta is showing the opacity, but the content is right up at the top of the screen and only the bottom half of that shows ...... I'd hazzard a guess that this is not the way it is being seen on Mac ....

    Nadia

  14. #14
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Nadia P View Post
    Win Safari beta is showing the opacity, but the content is right up at the top of the screen and only the bottom half of that shows ...... I'd hazzard a guess that this is not the way it is being seen on Mac ....

    Nadia

    Nadia can you send me a print screen, please?

    Thank you for help.

  15. #15
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It will have to be tomorrow sometime though - it's after 1am here and I need some sleep :-)

    I'm talking about the beta version of Safari for windows - no Safari on a Mac.... so I wouldn't be too worried about it if it looks ok on your Mac!

    Nadia

  16. #16
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very nice.

    Well, I have PC and I also have try install twice Safari demo and I can't see the File Menus, and the bar address not working. That's why I came here, because the client has MAC and said that don't see none.

    Thank you!

  17. #17
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Safari on Windows sees this:
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  18. #18
    SitePoint Evangelist
    Join Date
    Jan 2001
    Location
    earth
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by logic_earth View Post
    Safari on Windows sees this:

    Thank you. :/

    Now, how can I solve this? It's normal to what works in FF and IE doesn't work at Safari?

  19. #19
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, here you go - I've put your page through browsercam.com and here's a heap of snapshots from both Win and Mac, their various browers.
    You certainly do have a problem with the 'real' safari by the looks of things.

    These sites may help with 'bugs'....
    http://www.quirksmode.org/
    http://www.positioniseverything.net/

    Nadia

  20. #20
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Depending on which version of Safari you might need

    -khtml-opacity: 0.7;

    which was the one of the four opacity variants left out of the preceding code.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •