都知道，在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. Lua参考手册

    英文原版: http://www.lua.org/manual/5.1/ 中文版下面2个地址都有:一样的 manual.luaer.cn lua在线手册 lua参考手册Lua参考手册的中文翻译(云风翻 ...

  2. id有空格获取不到元素

  3. Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算

    目录(?)[-] proc文件系统 proccpuinfo文件 procstat文件 procpidstat文件 procpidtasktidstat文件 系统中有关进程cpu使用率的常用命令 ps ...

  4. （转载）PHP源代码分析- tick(s)

    (转载)http://bbs.phpchina.com/forum.php?mod=viewthread&tid=94534 昨天有位朋友在杭州的PHPer群里面贴出了下面的一段代码并给出了运 ...

  5. 阿里云ECS试用

    公司在推一个大项目,感觉阿里云挺好用的,自己搞了台小机器平时可以跑着玩,而且可以做个跳板机,平时学校里的收费网直接用跳板机就可以访问了,直接写个脚本在自己机器上跑一下: #!/usr/bin/expe ...

  6. Unique Paths II ——LeetCode

    Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...

  7. HDOJ(HDU) 2136 Largest prime factor(素数筛选)

    Problem Description Everybody knows any number can be combined by the prime number. Now, your task i ...

  8. nyoj 222 整数中的1个数以及这类问题

    之前也写过一篇这样的文章,但是隔了这么久,竟然忘了.还是要有清晰的思路,才能真正的掌握. 这道题是这样的: 给出两个非负32位整型范围内的数a,b,请输出闭区间[a,b]内所有数二进制中各个位的1的总 ...

  9. 20个高级Java面试题

    这是一个高级Java面试系列题中的第一部分.这一部分论述了可变参数,断言,垃圾回收,初始化器,令牌化,日期,日历等等Java核心问题. 程序员面试指南:https://www.youtube.com/ ...

  10. C++ —— 构建开源的开发环境

    目录: 1.开源环境的选择:IDE+编译器 2.构建步骤 1.开源环境的选择:IDE+编译器 在这里选择都是发布在GPL license 下的工具:codeblocks 和 gnu gcc codeb ...