Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS Transparent effect

Reply
Thread Tools

CSS Transparent effect

 
 
howachen@gmail.com
Guest
Posts: n/a
 
      02-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">
<!--
#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

 
Reply With Quote
 
 
 
 
Jim Higson
Guest
Posts: n/a
 
      02-26-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) 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

 
Reply With Quote
 
 
 
 
howachen@gmail.com
Guest
Posts: n/a
 
      02-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 寫道:

> (E-Mail Removed) 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


 
Reply With Quote
 
Jim Higson
Guest
Posts: n/a
 
      02-26-2006
(E-Mail Removed) 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 寫道:
>
>> (E-Mail Removed) 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


 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      02-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...

--
Neredbojias
Contrary to popular belief, it is believable.
 
Reply With Quote
 
Jim Higson
Guest
Posts: n/a
 
      02-27-2006
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

 
Reply With Quote
 
howachen@gmail.com
Guest
Posts: n/a
 
      02-27-2006
well, the png solution doen't work very well with IE.

are there any pure css solution?

thanks.

Jim Higson 寫道:

> (E-Mail Removed) 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 寫道:
> >
> >> (E-Mail Removed) 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


 
Reply With Quote
 
Jim Higson
Guest
Posts: n/a
 
      02-27-2006
(E-Mail Removed) 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.
 
Reply With Quote
 
Jim Moe
Guest
Posts: n/a
 
      02-27-2006
(E-Mail Removed) 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)
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      02-28-2006
On Mon, 27 Feb 2006 09:51:34 +0000, Jim Higson <(E-Mail Removed)> 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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS - Transparent Hover for Horizontal Menu Items? david.hunter@gmail.com HTML 0 11-08-2006 08:00 PM
using css to create transparent table johnmclaren_99@yahoo.com HTML 7 07-21-2006 01:44 PM
Can I use CSS for this effect Nomadic Worker HTML 2 04-03-2005 02:13 AM
CSS Border Bottom Effect: <h1> vs Using A Class Lauri Raittila HTML 7 03-03-2005 06:21 PM
CSS "drop shadow" block element effect Erik Harris HTML 11 03-03-2004 12:54 AM



Advertisments