CSS Transparent effect

howachen · Feb 26, 2006

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">

</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

Jim Higson · Feb 26, 2006

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.

howachen · Feb 26, 2006

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 å¯«é“ï¼š

Jim Higson · Feb 26, 2006

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.

Neredbojias · Feb 27, 2006

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...

Jim Higson · Feb 27, 2006

Neredbojias said:
With neither quill nor qualm, Jim Higson quothed:

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...

howachen · Feb 27, 2006

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

are there any pure css solution?

thanks.

Jim Higson å¯«é“ï¼š

Jim Higson · Feb 27, 2006

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 Moe · Feb 27, 2006

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.

Andy Dingley · Feb 28, 2006

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.

Jim Higson · Feb 28, 2006

Andy said:
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

dorayme · Feb 28, 2006

Jim Higson said:
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...

Jim Higson · Feb 28, 2006

dorayme said:
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.

Snowing Effect	2	Apr 24, 2023
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Fading effect between play and play-over and pause and pause-over	0	Oct 16, 2021
How to keep an a:hover effect with css like "onMouseOut()"?	2	Apr 4, 2013
I need help fixing my website	2	Oct 15, 2023
Newbie's CSS not having an effect.	77	Nov 15, 2009
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
Javascript DOM	1	Mar 29, 2023

CSS Transparent effect

howachen

Jim Higson

howachen

Jim Higson

Neredbojias

Jim Higson

howachen

Jim Higson

Jim Moe

Andy Dingley

Jim Higson

dorayme

Jim Higson

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads