Solved

setting background color opacity

Posted on 2004-04-02
12
504 Views
Last Modified: 2012-06-27
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
Comment
Question by:awolfe76
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +3
12 Comments
 
LVL 17

Expert Comment

by:dorward
ID: 10740248
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10742986
do the td tag this way:
<td style="background-color:#000001;filter:chroma(color=000001)">
IE only.

Cd&
0
 

Expert Comment

by:strolfey
ID: 10746005
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:Daydreams
ID: 10746635
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
 

Author Comment

by:awolfe76
ID: 10746869
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
 

Author Comment

by:awolfe76
ID: 10746984
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
 
LVL 31

Accepted Solution

by:
seanpowell earned 250 total points
ID: 10747601
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
 
LVL 15

Expert Comment

by:Daydreams
ID: 10747930
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 10747955
I'm afraid this code isn't exactly valid...

<td class="box"><td class="text">
0
 
LVL 15

Expert Comment

by:Daydreams
ID: 10747960
Nevermind.. Sean's example is excellent..  :)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10747984
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
 

Author Comment

by:awolfe76
ID: 10748255
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question