Solved

Reversing Alfa Filter

Posted on 2004-04-21
1
1,116 Views
Last Modified: 2008-02-01
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
Comment
Question by:swinslow
1 Comment
 
LVL 31

Accepted Solution

by:
seanpowell earned 150 total points
ID: 10881758
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

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

707 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

18 Experts available now in Live!

Get 1:1 Help Now