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 5 of 5

Thread: Opacity in CSS

  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Opacity in CSS

    Hey all, I have a bit of a dilemma

    Iím having trouble with using an image in a table cell which has a background which is has an opacity of 30%, hope Iíve explain that rite.
    To go into more detail

    #left {
    height:357px;
    width:312px;
    padding:10px;
    opacity: .3;
    filter: alpha(opacity=30);
    text-align:left;
    vertical-align:text-top;
    }

    That is what is currently assigned to a table cell which Iím place an image in. Now the problem is the image is inheriting the properties of the opacity which I donít want it to.

    My question is, is there a way of getting around it.

    Iíve tried manually using images but I canít get them to save with #FFFFFF with the opacity of %30 in Photoshop, it seems to save it with %100 opacity
    Any help would be appreciated

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,928
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    No, CSS opacity is always inherited by children. Apart from the fact that an image most likely has nothing to do in a table (as tables are not there to create a page layout!) you could apply a semi-transparent image (PNG) as background then you donít need CSS opacity.

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    You will, however, need to use some for of hack for IE6, which doesn't support alpha transparency in PNG's without the filter being used in CSS.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there bubaphex,

    absolute positioning of the image will prevent it from inheriting the opacity.
    Here is a basic example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    body {
        background-color:#f00;
     }
    #container {
        position:relative;
        width:332px;
        margin:30px auto;
     }
    #container td {
        height:357px;
        width:312px;
        padding:10px;
        background-color:#fff;
        filter:alpha(opacity=30);
        opacity:0.3;
     }
    #container img {
        position:absolute;
        top:134px;
        left:112px;
        width:100px;
        height:100px;
        border:4px solid #f00;
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
      <table><tr>
        <td></td>
      </tr></table>
    
    <img src="http://mysite.orange.co.uk/azygous/images/anim3.gif" alt=""/>
    
    </div>
    
    
    </body>
    </html>
    coothead

    p.s. you should not be using table for layout purposes.

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers for the help guys, no need to worry, not using the table for layout purposes, just a table to display IM User name, and gif's displaying there IM status


  •  

    Posting Permissions

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