都知道，在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. hdu-3376-Matrix Again(最小费用最大流)

    题意: 给一个矩形,从左上角走到右下角,并返回左上角(一个单元格只能走一次,左上角和右下角两个点除外) 并且从左上到右下只能往右和下两个方向.从右下返回左上只能走上和左两个方向! 分析: 拆点,最小费 ...

  2. 【转】ConcurrentModificationException异常解决办法 --不错

    原文网址:http://blog.sina.com.cn/s/blog_465bcfba01000ds7.html 1月30日java.util.ConcurrentModificationExcep ...

  3. qt项目转vs项目

    Qt creator是一个非常好用的跨平台项目管理工具和集成开发环境(IDE).但是对于我自己来说Visual Studio依然是我最顺手的开发工具,由于Qt使用了moc,这样要是自己管理Visual ...

  4. trigger 触发器

    --trigger --在SC表上建了一个触发器,查看inserted和deleted表中内容. create trigger tri_1 on sc for insert,update,delete ...

  5. 最小生成树问题（Kruskal 算法）（克鲁斯卡尔）

    如图就是Kuskal算法 将图中的每条边按照权值从小到大排序,每次加起来就行,注意的是不要形成回路: 重点是如何用代码实现不能形成回路 看代码; #include <cstdio> #in ...

  6. 病毒侵袭持续中 - HDU 3065（AC自动机，判断子串个数）

    分析:依然是一个模板题,不过在写建立失败指针的地方竟然写错了三次....看来现在状态不太好.   代码如下: ============================================= ...

  7. Girls' research - HDU 3294 （Manacher处理回文串）

    题目大意:给以一个字符串,求出来这个字符串的最长回文串,不过这个字符串不是原串,而是转换过的,转换的原则就是先给一个字符 例如 'b' 意思就是字符把字符b转换成字符 a,那么c->b, d-& ...

  8. poj1016

    题目大意:数据统计 看明白了,就是给你一个数,例如31123314,代表的意思有3个1,1个2,3个3,1个4,但数字本身的有的数字也是有3个1,1个2,3个3,1个4,所以这样的数叫做self-in ...

  9. [置顶] 【Git入门之十五】Github操作指南

    原创作品,转载请标明:http://blog.csdn.net/jackystudio/article/details/12374633 最终篇,介绍一下Github网站的使用,主要是翻译为主,简化了 ...

  10. Tomcat Server Locations