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

来源：互联网发布：php 二进制转base64 编辑：程序博客网时间：2024/05/16 07:23

都知道，在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{ width: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{ width: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        {            width: 173px;            height: 163px;            display: block;            background-color: orange;        }        .absolute        {            position: absolute;            width: 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        {            width: 173px;            height: 163px;            display: block;            background-color: orange;        }        .absolute        {            position: absolute;            width: 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的不透明度