都知道，在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】1525 Euclid's Game

    自己想明白的第一道博弈.首先a==b的时候肯定是先手赢: 然后当a>=2*b时,不妨假设a=nb+k, k<b,因此,不论后续怎么博弈,一定可以出现a=k, b=b的情况.因此,无论这个局 ...

  2. SVN服务器搭建（与apache整合）

    一．SVN介绍 SVN是一个版本控制工具,Subversion的版本库(repository),就是位于服务器,统一管理和储存数据的地方. 二．SVN数据存储方式 在Subversion中,版本库的数 ...

  3. redis数据过期策略【转】

    key的过期时间通常,Redis key被创建时不会自动关联过期时间,key将长久存在,除非通过DEL等命令显示的删除.EXPIRE命令簇可以为指定的key关联一个过期时间,代价是一点额外的内存开销. ...

  4. HDU 5501 背包问题

    需要按照B/C的值从大到小排序. #include<cstdio> #include<cstring> #include<iostream> #include< ...

  5. Xmanager4使用记录

    想在windows下远程登录到了Linux桌面,但又不想装vnc server,况且根据同学的实践,vnc的桌面在远程和本地都能看得到,这个似乎不太好.   google到xmanager,装了个测试 ...

  6. IIS7授权错误：“无法验证对路径的访问”的解决方法

    解决方法: iis7 无法验证对路径的访问 1.打开IIS 7管理器,鼠标单击定位到出现了这个错误的网站. 2.在IIS 7管理器的右边,选择“基本设置”. 3.在弹出的“编辑网站”对话框中,单击“连 ...

  7. 动态规划——线性dp

    我们在解决一些线性区间上的最优化问题的时候,往往也能够利用到动态规划的思想,这种问题可以叫做线性dp.在这篇文章中,我们将讨论有关线性dp的一些问题. 在有关线性dp问题中,有着几个比较经典而基础的模 ...

  8. POJ 3050 穷举

    题意:给定一个5*5的地图,每个格子上有一个数字.从一个格子出发(上下左右4个方向),走5步将数字连起来可以构造出一个6位数.问该地图可以构造出多少个不同的6位数. 分析:可以对每个格子做深度优先遍历 ...

  9. android——wifi系统架构

    1. 系统架构 Android WiFi系统引入了wpa_supplicant,它的整个WiFi系统以wpa_supplicant为核心来定义上层用户接口和下层驱动接口.整个WiFi系统架构如下图所示 ...

  10. javascript中错误使用var造成undefined

    在javascript中依据变量作用的范围不同分为局部变量和全局变量,直接定义的变量是全局变量,全局变量能够被全部的脚本訪问:在函数中定义的变量是局部变量,局部变量仅仅在函数内有效. 假设全局变量和局 ...