Solved

setting background color opacity

Posted on 2004-04-02
12
496 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
  • 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
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 
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

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

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

Suggested Solutions

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 …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

831 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