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!
Course Of The Month
8 days, 1 hour left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Alpha Transparency
Posted on 2004-04-06
Hi,
I'm using the following code to creat a transparency for certain cells of a table:
<table background="img/home_bg.jp
<tr>
<td height="250" bgcolor="#ffffff" style="filter: alpha(opacity=50); -moz-opacity: 0.50;"><div align="center">alpha transparency applied</div></td>
</tr>
<tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>
The problem is that the text is also afflicted with the transparency. How can I make the background use the transparency, but not the text?
I'm using the following code to creat a transparency for certain cells of a table:
<table background="img/home_bg.jp
<tr>
<td height="250" bgcolor="#ffffff" style="filter: alpha(opacity=50); -moz-opacity: 0.50;"><div align="center">alpha transparency applied</div></td>
</tr>
<tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>
The problem is that the text is also afflicted with the transparency. How can I make the background use the transparency, but not the text?
[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
4
4
2- +3
15 Comments
I never used alpha transparency filters, but I would try to override opacity style in the inner <DIV>:
<table background="img/home_bg.jp
<tr>
<td height="250" bgcolor="#ffffff" style="filter: alpha(opacity=50); -moz-opacity: 0.50;">
<div align="center" style="filter: alpha(opacity=100); -moz-opacity: 1.00;">alpha transparency applied</div>
</td>
</tr>
<tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>
<table background="img/home_bg.jp
<tr>
<td height="250" bgcolor="#ffffff" style="filter: alpha(opacity=50); -moz-opacity: 0.50;">
<div align="center" style="filter: alpha(opacity=100); -moz-opacity: 1.00;">alpha transparency applied</div>
</td>
</tr>
<tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>
you are applying the transparency to the whole table cell...you just want the background color of the table cell to use the filter?
I just posted this a couple of days ago - it may be what you need:
http://www.pdgmedia.com/ee/trans.html
http://www.pdgmedia.com/ee/trans.html
Just put a layer with a high z-index on top in the cell and adjust the relative position.
<table background="img/home_bg.jp
<tr><td>
<div style="height:250px;backgr
<div style="height:250px;z-inde
alpha transparency applied</div></td>
</tr>
<tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>
Cd&
<table background="img/home_bg.jp
<tr><td>
<div style="height:250px;backgr
<div style="height:250px;z-inde
alpha transparency applied</div></td>
</tr>
<tr> <td height="250"><div align="center">no alpha transparency applied </div></td></tr>
</table>
Cd&
That's pretty much what I was suggesting :-)
<style type="text/css">
table { background-image: url('color1.gif'); }
#trans { position:relative; left:0; top:0; z-index:1; width:100%; height:100%; background-color:#FFF; filter:alpha(opacity='40')
</style>
<table>
<tr>
<td width="100" height="100">
<div style="position:relative; width:100%; height:100%;">
<div id="trans"></div>
<div style="position:absolute; left:0; top:0; z-index:2;">
<p>MY TEXT</p>
<p><a href="#">My Link</a></p>
</div>
</div>
</td>
<td width="100" height="100"> </td>
</tr>
</table>
<style type="text/css">
table { background-image: url('color1.gif'); }
#trans { position:relative; left:0; top:0; z-index:1; width:100%; height:100%; background-color:#FFF; filter:alpha(opacity='40')
</style>
<table>
<tr>
<td width="100" height="100">
<div style="position:relative; width:100%; height:100%;">
<div id="trans"></div>
<div style="position:absolute; left:0; top:0; z-index:2;">
<p>MY TEXT</p>
<p><a href="#">My Link</a></p>
</div>
</div>
</td>
<td width="100" height="100"> </td>
</tr>
</table>
Glad we could help. Thanks for the A. :^)
Sean,
You always use three so I'm trying to get the average up. ;^)
Cd&
Sean,
You always use three so I'm trying to get the average up. ;^)
Cd&
Oh yeah that... The result of many misspent hours... days... weeks. It's gotten too easy.
I thought I left on of my trademark typos in a color value.
A million is nice but getting cert number 6 (web languages) is bigger. There are fewer experts with 6 then there are million pointers.
Cd&
I thought I left on of my trademark typos in a color value.
A million is nice but getting cert number 6 (web languages) is bigger. There are fewer experts with 6 then there are million pointers.
Cd&
Active 2 days ago
There is a slightly easier way ...
I have a cell (which is a TH) ...
<style>
.MaintTHError
{
border-style : none;
border-color : #FF0000;
background-color : #FF0000;
filter : alpha(opacity='15');
}
.MaintSPANErrorLabel
{
position: relative;
left: 0px;
top: 0px;
text-align: center;
}
</style>
<th class="MaintTHError"><span
That's it!
I use this to give the cell (which is a header for a row) a transaparent red background when there is an error in that row. The page background stills shows through and you do not need to worry about sizing anything. I've only tried it with a single line of text.
Hope this is of use to you all!
Regards,
Richard Quadling.
I have a cell (which is a TH) ...
<style>
.MaintTHError
{
border-style : none;
border-color : #FF0000;
background-color : #FF0000;
filter : alpha(opacity='15');
}
.MaintSPANErrorLabel
{
position: relative;
left: 0px;
top: 0px;
text-align: center;
}
</style>
<th class="MaintTHError"><span
That's it!
I use this to give the cell (which is a header for a row) a transaparent red background when there is an error in that row. The page background stills shows through and you do not need to worry about sizing anything. I've only tried it with a single line of text.
Hope this is of use to you all!
Regards,
Richard Quadling.
Featured Post
Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.
One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
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.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS
Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…
Suggested Courses
Course of the Month8 days, 1 hour left to enroll
729 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.