How can I use CSS to control the background transparency of a webpage?

How can I use CSS to control the background transparency of a webpage? In this article, we use the general idea: to make two layers, one for text and the other for transparent background (using filters ).

Implementation Method in IE:

HTML code:
<Div class = "alpha1">
  <Div class = "AP2">
      <P> the background is red (# ff0000) and the transparency is 20%. </P>
  </Div>
</Div>

CSS code:
. Alpha1 {
    Width: 300px;
    Height: 200px;
    Background-color: # ff0000;
    Filter: alpha (opacity = 30 );
}
. AP2 {
    Position: relative;
}
This can basically be achieved without worrying about positioning and self-adaptation. The biggest problem is that it is only supported by IE.
If it is compatible with ff and OP, how can it be written? First of all, the above method is not feasible, so we can only use the method of overlapping two layers.
Modify the Page Structure and CSS style:
HTML code:
<Div class = "alpha1">
  <Div class = "AP2">
      <P> the background is red (# ff0000) and the transparency is 20%. </P>
  </Div>
  <! -- [If IE]> <! [If! IE]> <! [Endif] --> <Div class = "alpha2"> </div> <! -- [If IE]> <! [Endif]> <! [Endif] -->
</Div>

CSS code:
. Alpha1,. alpha2 {
    Width: 100%;
    Height: auto;
    Min-Height: 250px;
    _ Height: 250px;
    Overflow: hidden;
    Background-color: # ff0000;
}
. Alpha1 {
    Filter: alpha (opacity = 20 );
}
. Alpha2 {
    Background-color: # ffffff;
    -Moz-opacity: 0.8;
    Opacity: 0.8;
}
. AP2 {
    Position: absolute;
}