Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1134
  • Last Modified:

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>
0
swinslow
Asked:
swinslow
1 Solution
 
seanpowellCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now