Solved

setting background color opacity

Posted on 2004-04-02
12
493 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML and CSS for a complex page 20 62
CSS measurement 10 34
CSS z-index issue 3 22
Could you point how to give Bootstrap's open/ close menu effect ? 25 34
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

867 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now