Reversing Alfa Filter

I am using filters to create some cool effects, but I do not know how to "undo" or "reverse" an effect once it is set. Especially the Alpha filter.

In the code I am posting below, the class HeadBoxP2 sets a transparency. However inside that div, I want some text, but I do not want it to be transparent. I am not sure how to make it solid.

I have tried to use "z-index" to place the text as the top layer, but I am not sure if I am using it correctly or not.

Thanks in advance,
Soren

<html>

<head>

<style type="text/css">
.HeadBoxP1 {
          text-align:center;
          vertical-align:middle;
          border-color:#600060;
          border-width:3px;
          border-style:solid;
          width:98%;
          filter:progid:DXImageTransform.Microsoft.Shadow(color=#0000ff, direction=225, strength=5);
          position:relative;
          z-index:1;
          }

 .HeadBoxP2 {
          width:100%;
          background-color:#c4e0ff;
          filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
          position:relative;
          z-index:2;
          }

 .HeadText {
          filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=100);
          font-family:arial black;
          font-size:20pt;
          color:#200020;
          position:relative;
          z-index:3;
          }
</style>

</head>

<body style="background-image:URL('http://www.SorenSherry.com/Img/groovy7e.jpg');">

<div style="text-align:center;padding:50px;">
  <div class="HeadBoxP1">
    <div class="HeadBoxP2">
      <div class="HeadText">
        Mega Cool Stuff!!
      </div>
    </div>
  </div>
</div>

</body>
</html>
LVL 4
swinslowAsked:
Who is Participating?
 
seanpowellConnect With a Mentor Commented:
Basically you need to absolutely position the top div.

I've removed all the unnecessary bits :-)

<html>
<head>
<style type="text/css">
.HeadBoxP1 {
          border:3px solid #600060;
          width:98%;
          filter:progid:DXImageTransform.Microsoft.Shadow(color=#0000ff, direction=225, strength=5);
          position:relative;
          }

 .HeadBoxP2 {
          width:auto;
          background-color:#c4e0ff;
          filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
          height:44px;
          }

 .HeadText {
          width:100%;
          filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=100);
          font-family:"arial black";
          font-size:20pt;
          color:#200020;
          position:absolute;
          top:0;
          left:0;
          text-align:center;
          }
</style>
</head>

<body style="background-image:URL('http://www.SorenSherry.com/Img/groovy7e.jpg');">
<div style="text-align:center;padding:50px;">
  <div class="HeadBoxP1">
    <div class="HeadBoxP2"></div>
    <div class="HeadText">Mega Cool Stuff!!</div>
  </div>
</div>

</body>
</html>
0
All Courses

From novice to tech pro — start learning today.