[置顶] css 背景透明，文字不透明，alpha滤镜，opacity，position:relative;

都知道，在alpha滤镜下，背景透明了，里面的文字也会跟随透明，我们可以设置内容的position为relative可以解决这个问题

但是在position为absolute这么做却没有效果，怎么解决呢，看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>alpha</title>
<style type="text/css">
.alpha
{
 100px;
 height:100px;
 background-color:red;
 display:block;
 opacity: 0.35;
 filter: "alpha(opacity=35)";
 filter: alpha(opacity=35);
 -moz-opacity: 0.35;
}
</style>
</head><body>
    <div class="alpha">
     <div>文字显示</div>
    </div>
</body>
</html>

这样显示的文字也是0.35的透明，修改代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>alpha</title>
<style type="text/css">
.alpha
{
 100px;
 height:100px;
 background-color:red;
 display:block;
 opacity: 0.35;
 filter: "alpha(opacity=35)";
 filter: alpha(opacity=35);
 -moz-opacity: 0.35;
}
</style>
</head>
<body>
    <div class="alpha">
     <div style="position:relative;"> 文字显示</div>
    </div>
</body>
</html>

文字没有了不透明效果

这没什么，也不是我要说的重点

看这个

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .alpha50
        {
            opacity: 0.5;
            filter: "alpha(opacity=50)";
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
        }

        .box
        {
             173px;
            height: 163px;
            display: block;
            background-color: orange;
        }

        .absolute
        {
            position: absolute;
             173px;
            height: 30px;
            margin-top: 133px;
        }

        .relative
        {
            position: relative;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="box">
                <div class="absolute alpha50">
                    <div class="relative">显示文字</div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

虽然设了relative，但文字还是透明的

反复试验我发现修改代码顺序可以解决这个问题

如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        .alpha50
        {
            opacity: 0.5;
            filter: "alpha(opacity=50)";
            filter: alpha(opacity=50);
            -moz-opacity: 0.5;
        }

        .box
        {
             173px;
            height: 163px;
            display: block;
            background-color: orange;
        }

        .absolute
        {
            position: absolute;
             173px;
            height: 30px;
            margin-top: 133px;
        }

        .relative
        {
            position: relative;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="box">
                <div class="absolute">
                    <div class="alpha50">
                        <div class="relative">显示文字</div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

先absolute再alpha可以解决在absolute下设置relative的不透明度