都知道，在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的不透明度

ok

[置顶] css 背景透明，文字不透明，alpha滤镜，opacity，position:relative;的更多相关文章

  1. [小技巧]兼容IE6的纯CSS背景半透明文字不透明

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. css背景透明文字不透明

    测试背景透明度为0.3.文字不透明: background-color: #000; /* 一.CSS3的opacity */ opacity: 0.3; /* 兼容浏览器为:firefox,chro ...

  3. css实现背景透明文字不透明

    设置元素的透明度:  -moz-opacity:0.8; /*在Firefox中设置元素透明度  filter: alpha(opacity=80); /*ie使用滤镜设置透明   但是当我们对一个标 ...

  4. css3背景透明文字不透明

    在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜fi ...

  5. 背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)

    以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 以背景黑色,透明度0.5举例 非IE:backgr ...

  6. CSS3实现背景透明文字不透明

    最近遇到一个需求,如下图,input框要有透明效果 首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了 这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导 ...

  7. div半透明背景，文字不透明

    background: rgba(255, 255, 255, 0.8) !important; /* IE无效,FF有效 */ background: #fff; filter: alpha(opa ...

  8. css实现背景半透明文字不透明的效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. html 背景透明文字不透明

    .alpha{ width: 100px; height: 100px; color: #fff; background: rgba(0, 0, 0, .3); filter: progid:DXIm ...

随机推荐

  1. 【HDOJ】2531 Catch him

    简单BFS.就是要把所有的D点当成一个整体考虑(整体移动). /* 2531 */ #include <iostream> #include <queue> #include ...

  2. War3Tool dota改键v3.3版

    wartool魔兽全屏改键功能:1.支持11平台自定义改建,自动进局域网(同类软件暂时没发现这个功能)2.技能改键,可以有效的切换适合你的技能键3.war3路径扫描,运行本程序一键就能打开war3 ( ...

  3. bzoj1135

    POI阴影又发作了但这道题挺好的,比较涨知识裸的想法是裸的每次二分图匹配,但显然会TLE这里就要引入Hall定理:二分图G中的两部分顶点组成的集合分别为X, Y, X={X1, X2, X3,X4,. ...

  4. bzoj2539

    这道题真的不难,但是细节挺多(具体见程序)题目本身而言,显然是个费用流模型(或者写KM) type node=record point,next,flow,cost:longint; end; ..] ...

  5. BZOJ 1053 [HAOI2007]反素数ant

    1053: [HAOI2007]反素数ant Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1948  Solved: 1094[Submit][St ...

  6. WordPress /wp-admin/users.php畸形s参数路径泄漏漏洞

    漏洞版本: WordPress 2.7.x WordPress 2.8.x WordPress 2.9.x WordPress 3.0.x WordPress 3.1.x WordPress 3.2. ...

  7. 分治(CDQ)：[BOI2007]摩基亚Mokia

    [题目描述] 摩尔瓦多的移动电话公司摩基亚(Mokia)设计出了一种新的用户定位系统.和其他的定位系统一样,它能够迅速回答任何形如“用户C的位置在哪?”的问题,精确到毫米.但其真正高科技之处在于,它能 ...

  8. 检测CPU是否支持虚拟化

    一:下载检测软件 地址:http://files.cnblogs.com/hongmaju/Coreinfo.rar 二:使用方法 打开运行窗口,找到Coreinfo.exe,运行如下: 现在你要做的 ...

  9. 【模拟赛】BYVoid魔兽世界模拟赛 解题报告

    题目名称(点击进入相关题解) 血色先锋军 灵魂分流药剂 地铁重组 埃雷萨拉斯寻宝 源文件名(.c/.cpp/.pas) scarlet soultap subway eldrethalas 输入文件名 ...

  10. tomcat不用工程名访问怎么配置？

    tomcat不用工程名访问配置,直接用域名访问 在 tomcat6的安装路径下,D:\Tomcat-6\conf,修改server.xml文件 编辑Host节点, <Host appBase=& ...