• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 512
  • Last Modified:

setting background color opacity

i have a table with an image in the background. what i want to do is have one of the cells have a background of white but make the white transparent so that the tables image shows through. i only want the white to be transparent and not affect the text within the cell. can this be done with css? i have done it but it makes the background and anything else with the cell transparent.
thanks.
0
awolfe76
Asked:
awolfe76
  • 3
  • 3
  • 2
  • +3
1 Solution
 
dorwardCommented:
The short answer is: No

The long answer is that you could use a background image with partial transparency, but Internet Explorer doesn't support it.
0
 
COBOLdinosaurCommented:
do the td tag this way:
<td style="background-color:#000001;filter:chroma(color=000001)">
IE only.

Cd&
0
 
strolfeyCommented:
If you don't mind a dithered effect, you can use a 2x2 transparent/color gif to simulate transparency. Not elegant, but it works in all browsers.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
DaydreamsCommented:
Take a look at this (IE only):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>example page</title>
<style type="text/css">

.text {color:#000; position: absolute; top:100px;left:100px;border:1pt #000 solid;width:100px;height:100px;}

.box {background-image: url(myimage.jpg);filter:alpha(opacity=15); border:1pt #000 solid;  background-repeat:no-repeat; position: absolute; top:100px;left:100px;width:100px;height:100px;}

</style>
</head>
<body><table><tr>
<td class="box"><td class="text">This text is not affected by the transparency</td></tr></table>
</body>
</html>


..without tables:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>example page</title>
<style type="text/css">
.text {color:#000; position: absolute; top:100px;left:100px;border:1pt #000 solid;width:100px;height:100px;}

.box {background-image: url(myimage.jpg);filter:alpha(opacity=15); border:1pt #000 solid; background-repeat:no-repeat; position: absolute; top:100px;left:100px;width:100px;height:100px;}

</style>
</head>
<body>
<div class="box"></div><div class="text">This text is not affected by the transparency</div>
</body>
</html>
0
 
awolfe76Author Commented:
i have tried everyones suggestions but it hasnt quite worked yet. so i have a couple questions for each of you.
COBOLdinosaur - i can only get the white box to be shown or not be shown using your code. if you could explain to me how to make it transparent, change the opacity, it may work.
strolfey - i thought about using and even tried early the gif but it just doesnt look right. thanks though.
daydreams  - you idea works great with only one problem. the text that is covered by the transparent box has links in it which the box covers and doesnt allow them to be used. if you have any way of fixing this it would be great.
i will keep trying the code and playing with them all hopefully something will come up soon. thanks to all.
0
 
awolfe76Author Commented:
i am working with the following code as well as trying your suggestions. kind of a combination or everthing:

<td width="100" height="230" align="left" valign="top" bgcolor="#FFFFFF; filter:alpha(opacity='40', finishopacity='40', style='0', startx='0', starty='0', finishx='0', finishy='0')">

but for some reason the background ends up red. but the links do work with it.
0
 
seanpowellCommented:
Hi,

A couple of things...

1. Your td cell is turning red because you've missed the style parameter, so the browser is likely seeing #FFFFFF0 - or something to that effect. Also, those other parameters are not needed unless you're going for some type of gradient effect.
<td width="100" height="230" align="left" valign="top" style="background-color:#FFF; filter:alpha(opacity='40')">

The problem though - is that this is going to effect the text as well, and there's no way to override it as long as you're styling the cell - everything internal will also get styled.

One possible solution is to use div's and absolute positioning, similar to Daydreams code above, but with the table code and the div code combined. A lot of code for a simple effect, nothing new there :-)

Here's an example for you - most of the coding in the second example is inline to help you see what's going on.
http://www.pdgmedia.com/ee/trans.html

0
 
DaydreamsCommented:
awolfe76, any links, like the text, should be in td or div class "text":

<td class="box"><td class="text">This text is not affected by the transparency. Here is a link: <a href="Somwhere">click here</a></td><</tr></table>
0
 
seanpowellCommented:
I'm afraid this code isn't exactly valid...

<td class="box"><td class="text">
0
 
DaydreamsCommented:
Nevermind.. Sean's example is excellent..  :)
0
 
COBOLdinosaurCommented:
My bad you have to declare the chroma at the body level. so ieffects the whole page.  That is why you use a color code like #000001, the you are only using specificaly where yu want transparency.  As for controling opacity. Nope... does not have parameters.  You have the alpha filter for that, and as you have already seen, it doesn't have teh capbality to allow what you want.  

You will have to compromise on something; change your design; or continue chasing your tail, because the way yu want it to work cannot be done.  I think Daydreams is going to get you the closest approxiamtion.

Cd&

0
 
awolfe76Author Commented:
thanks for all the help. sean your help worked great just have to play with it a little to get it to work for me but it is the closest thing to what i was looking for. thanks again.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 3
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now