Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.
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&
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
![[Webinar] How Hackers Steal Your Credentials](https://filedb.experts-exchange.com/files/public/2017/5/20/3315d9d8-8110-4d52-be94-a5aacdd83e4b.png)
Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Introduction
A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
- CSS
- HTML
- JavaScript
- PHP
- jQuery
- AJAX
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 Micro Tutorial viewers will learn how to create a CSS image sprite
(In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite)
Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS
Create a new class by typing ".Ribbon": Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month11 days, 19 hours left to enroll
730 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.