Solved

Reversing Alfa Filter

Posted on 2004-04-21
1
1,126 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
[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
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

Industry Leaders: We Want Your Opinion!

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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Change Firefox bookmarks menu font size 2 73
Need help fixing "Flash of Unstyled Content" problem with website 4 83
CSS overflow problem 21 43
CSS Odd/Even Confusion 2 42
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

752 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