CSS Transparent effect

Discussion in 'HTML' started by howachen@gmail.com, Feb 26, 2006.

  1. Guest

    hi,

    i have a table, and inside that table, there is an image.

    i want to apply transparent effect on the table's background, but not
    the image, what can i do with css?


    sample html:

    -----------------------------------------------------------------------------------

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #mytable {
    background-color: #FF0000;
    opacity: .3;
    filter: alpha(opacity=30);
    -moz-opacity: .3;
    }

    -->
    </style>
    </head>

    <body>
    <table id="mytable" width="425" height="252" border="0" cellpadding="0"
    cellspacing="0">
    <tr>
    <td><img
    src="http://www.google.com/logos/olympics06_hockey.gif"/></td>
    </tr>
    </table>
    </body>
    </html>
    -----------------------------------------------------------------------------------

    Thanks for any comment...


    howa
    , Feb 26, 2006
    #1
    1. Advertising

  2. Jim Higson Guest

    wrote:

    > hi,
    >
    > i have a table, and inside that table, there is an image.
    >
    > i want to apply transparent effect on the table's background, but not
    > the image, what can i do with css?


    Is the table's background an image? If so, try using a transparent PNG
    perhaps.

    --
    Jim
    Jim Higson, Feb 26, 2006
    #2
    1. Advertising

  3. Guest

    The image is a jpeg or a gif.

    If you have tried out my html above, you will see that both the table's
    bg (i.e. red in color) & the image have been faded out. (using CSS)

    My question is : how to apply this effect only on the table bg, but not
    the image?

    Thanks anyway...


    Jim Higson 寫é“:

    > wrote:
    >
    > > hi,
    > >
    > > i have a table, and inside that table, there is an image.
    > >
    > > i want to apply transparent effect on the table's background, but not
    > > the image, what can i do with css?

    >
    > Is the table's background an image? If so, try using a transparent PNG
    > perhaps.
    >
    > --
    > Jim
    , Feb 26, 2006
    #3
  4. Jim Higson Guest

    wrote:

    > The image is a jpeg or a gif. If you have tried out my html above,


    'Fraid not. It'd be much easier to do so if you posted a link, copy+paste
    into an empty document is tedious.

    > you will see that both the table's
    > bg (i.e. red in color) & the image have been faded out. (using CSS)
    >
    > My question is : how to apply this effect only on the table bg, but not
    > the image?


    Like I said, use a transparent PNG for the table background. If you only
    want one colour in the table background, create a 1 pixel image of the
    right colour/opacity and repeat it using the background-repeat rule.

    This is what I do on this page:

    http://surfcore.co.uk/forecasts

    Notice how the breadcrumbs area is transparent, but not the crumbs
    themselves. This is very similar to what you want.

    --
    Jim

    > Jim Higson 寫é“:
    >
    >> wrote:
    >>
    >> > hi,
    >> >
    >> > i have a table, and inside that table, there is an image.
    >> >
    >> > i want to apply transparent effect on the table's background, but not
    >> > the image, what can i do with css?

    >>
    >> Is the table's background an image? If so, try using a transparent PNG
    >> perhaps.
    >>
    >> --
    >> Jim
    Jim Higson, Feb 26, 2006
    #4
  5. Neredbojias Guest

    With neither quill nor qualm, Jim Higson quothed:

    > Like I said, use a transparent PNG for the table background. If you only
    > want one colour in the table background, create a 1 pixel image of the
    > right colour/opacity and repeat it using the background-repeat rule.
    >
    > This is what I do on this page:
    >
    > http://surfcore.co.uk/forecasts


    That's one of the best pages I've ever seen. Nice...

    --
    Neredbojias
    Contrary to popular belief, it is believable.
    Neredbojias, Feb 27, 2006
    #5
  6. Jim Higson Guest

    Neredbojias wrote:

    > With neither quill nor qualm, Jim Higson quothed:
    >
    >> Like I said, use a transparent PNG for the table background. If you only
    >> want one colour in the table background, create a 1 pixel image of the
    >> right colour/opacity and repeat it using the background-repeat rule.
    >>
    >> This is what I do on this page:
    >>
    >> http://surfcore.co.uk/forecasts

    >
    > That's one of the best pages I've ever seen. Nice...


    Woot! So all that geeking on the computron wasn't entirely in vain. Now if
    only you could tell potential advertisers the same...

    --
    Jim
    Jim Higson, Feb 27, 2006
    #6
  7. Guest

    well, the png solution doen't work very well with IE.

    are there any pure css solution?

    thanks.

    Jim Higson 寫é“:

    > wrote:
    >
    > > The image is a jpeg or a gif. If you have tried out my html above,

    >
    > 'Fraid not. It'd be much easier to do so if you posted a link, copy+paste
    > into an empty document is tedious.
    >
    > > you will see that both the table's
    > > bg (i.e. red in color) & the image have been faded out. (using CSS)
    > >
    > > My question is : how to apply this effect only on the table bg, but not
    > > the image?

    >
    > Like I said, use a transparent PNG for the table background. If you only
    > want one colour in the table background, create a 1 pixel image of the
    > right colour/opacity and repeat it using the background-repeat rule.
    >
    > This is what I do on this page:
    >
    > http://surfcore.co.uk/forecasts
    >
    > Notice how the breadcrumbs area is transparent, but not the crumbs
    > themselves. This is very similar to what you want.
    >
    > --
    > Jim
    >
    > > Jim Higson 寫é“:
    > >
    > >> wrote:
    > >>
    > >> > hi,
    > >> >
    > >> > i have a table, and inside that table, there is an image.
    > >> >
    > >> > i want to apply transparent effect on the table's background, but not
    > >> > the image, what can i do with css?
    > >>
    > >> Is the table's background an image? If so, try using a transparent PNG
    > >> perhaps.
    > >>
    > >> --
    > >> Jim
    , Feb 27, 2006
    #7
  8. Jim Higson Guest

    wrote:

    > well, the png solution doen't work very well with IE.


    You can use AlphaImageLoader. With scaling the single pixel will fill the
    table.

    Bit of a hack, but probably the only way.

    > are there any pure css solution?


    No. CSS can't specify RGBA colours.
    Jim Higson, Feb 27, 2006
    #8
  9. Jim Moe Guest

    wrote:
    >
    > i have a table, and inside that table, there is an image.
    >
    > i want to apply transparent effect on the table's background, but not
    > the image, what can i do with css?
    >

    After following the discussion, I am still not clear what you want to
    do. Do you want the table's background-color to be transparent? If so,
    that is easy: background-color:transparent.
    Or do you want some part of the image to be transparent? Then use an
    image editor to do that.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
    Jim Moe, Feb 27, 2006
    #9
  10. Andy Dingley Guest

    On Mon, 27 Feb 2006 09:51:34 +0000, Jim Higson <> wrote:

    >>> http://surfcore.co.uk/forecasts

    >>
    >> That's one of the best pages I've ever seen. Nice...

    >
    >Woot! So all that geeking on the computron wasn't entirely in vain.


    A well-deserved W00t! I think indeed. With all the usual rubbish that
    gets posted here it's nice to see a page that looks so good and works so
    well.

    Couple of validation glitches that could be sorted with little effort,
    but I imagine you'd tell me to go and chill my dudes out or something.
    Andy Dingley, Feb 28, 2006
    #10
  11. Jim Higson Guest

    Andy Dingley wrote:

    > On Mon, 27 Feb 2006 09:51:34 +0000, Jim Higson <> wrote:
    >
    >>>> http://surfcore.co.uk/forecasts
    >>>
    >>> That's one of the best pages I've ever seen. Nice...

    >>
    >>Woot! So all that geeking on the computron wasn't entirely in vain.

    >
    > A well-deserved W00t! I think indeed. With all the usual rubbish that
    > gets posted here it's nice to see a page that looks so good and works so
    > well.


    > Couple of validation glitches that could be sorted with little effort,
    > but I imagine you'd tell me to go and chill my dudes out or something.


    Yeah, mostly on pages like http://surfcore.co.uk/forecast/croyde, becuase
    <script>s can't be put directly inside a table body. Most of these script
    tags are only there to fix in IE the <tr> they succeed.

    There isn't a completely satisfactory place to put them. I can't put them
    inside the <tr> they fix because then they could be called before it's been
    properly added to the DOM, and if I put them in the next row... well...
    that seems mixed up and out of place somehow.

    I suppose the ones that are just for IE could be hidden with conditional
    comments, but that seems like validation for its own sake.

    The other non-validating HTML that I know of is on some node pages, like
    this:

    http://surfcore.co.uk/node/226

    Here this is Drupal screwing up when it automatically breaks paragraphs from
    the users' input. Short of forcing users to type <p> tags themselves I'm
    not sure what can be done about this, but it's on the TODO list somewhere.

    The single CSS sheet isn't valid, but only because of hacks to get things
    working in IE. Since conforming browsers ignore rules they don't
    understand, this shouldn't be a problem.

    I wouldn't recomend trying to view the CSS in its 'live' form :)

    --
    Jim
    Jim Higson, Feb 28, 2006
    #11
  12. dorayme Guest

    In article <>,
    Jim Higson <> wrote:

    > http://surfcore.co.uk/forecasts


    Interesting design... You might want to know that in Safari some
    things break when browser text-size is enlarged a few notches
    from "normal" (what's normal?). Take, for instance, the blue
    backgrounded box at right with "Weather Forecast...
    Tried looking in your own backyard? The search engine for
    Australians! Top 10 Stocks for 2006..." at
    http://surfcore.co.uk/forecasts/blyth

    Gets cut off at the bottom and text starts disappearing ("Ads by
    Gooooogle" etc on bottom is first to go...)

    In iCab, there is trouble on this score even at "normal" and
    small text.

    And in Firefox at more than small... I will stop here...

    --
    dorayme
    dorayme, Feb 28, 2006
    #12
  13. Jim Higson Guest

    dorayme wrote:

    > In article <>,
    > Jim Higson <> wrote:
    >
    >> http://surfcore.co.uk/forecasts

    >
    > Interesting design... You might want to know that in Safari some
    > things break when browser text-size is enlarged a few notches
    > from "normal" (what's normal?). Take, for instance, the blue
    > backgrounded box at right with "Weather Forecast...
    > Tried looking in your own backyard? The search engine for
    > Australians! Top 10 Stocks for 2006..." at
    > http://surfcore.co.uk/forecasts/blyth
    >
    > Gets cut off at the bottom and text starts disappearing ("Ads by
    > Gooooogle" etc on bottom is first to go...)
    >
    > In iCab, there is trouble on this score even at "normal" and
    > small text.
    >
    > And in Firefox at more than small... I will stop here...


    That box is an Adsense ad. Nothing we can do about it, in fact it's a
    violation of our contract with Google to try to fix their adverts' HTML.

    Well, there is something we can do - get ads elsewhere. I'm writing our own
    system at the moment.

    --
    Jim
    Jim Higson, Feb 28, 2006
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Erik Harris
    Replies:
    11
    Views:
    1,121
    Erik Harris
    Mar 3, 2004
  2. Lauri Raittila
    Replies:
    7
    Views:
    1,284
    Toby Inkster
    Mar 3, 2005
  3. Nomadic Worker

    Can I use CSS for this effect

    Nomadic Worker, Apr 3, 2005, in forum: HTML
    Replies:
    2
    Views:
    408
    Jonathan N. Little
    Apr 3, 2005
  4. Replies:
    7
    Views:
    14,196
    tonnie
    Jul 21, 2006
  5. Replies:
    0
    Views:
    956
Loading...

Share This Page