思路主要是

IE9+ 谷歌 火狐等使用rgba(0,0,0,0.5)来确定透明度 前三个值是RGB值 可以直接参考PS里对应的值 最后一个是透明度

例子 background：rgba(255,255,255,0.5);

然后去兼容IE6-IE8

ie6-ie8使用hack

@media \0screen\,screen\9{

　　　　.bg_opacity{

　　　　　　　background:rgb(255,255,255);//或者#000

　　　　　　　filter:Alpha(opacity=50);//设置整体透明度

　　　　　　　position:static;//恢复默认 不让下面的文字继承透明度

　　　　　　　zoom:1

　　　　　　　　

　　　　　　}

　　　　//这里必须加上下级文字 position:relative;

　　　　.bg_opacity p{

　　　　position:relative;

　　　　}

}

下面是完整的实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<div class="bg_opacity">

    <p>背景颜色透明，字体不会透明属性</p>

</div>

<style type="text/css">

    .bg_opacity{

        width: 200px;

        height: 300px;

        margin: 0px auto;

        /*ie9+ 谷歌 火狐 safari4+*/

        background-color: rgba(0,117,49,0.5);

    }

    .bg_opacity p{

        font-weight: bold;

        display: block;

        position: relative;

    }

    /*ie6-ie8*/

    @media \0screen\,screen\9{

        .bg_opacity{

            background-color: #007531;

            filter:Alpha(opacity=50);

            position: static;

            zoom: 1;

        }

    }

</style>

</body>

</html>

　　

CSS 实现背景透明 内容文字不透明 显示的更多相关文章

  1. 【原】CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  2. CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  3. CSS实现背景透明而背景上的文字不透明完美解决

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  4. CSS实现背景透明，文字不透明(兼容所有浏览器)

    我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...

  5. CSS实现背景透明而背景上的文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  6. CSS实现DIV层背景透明而文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  7. CSS实现背景透明，文字不透明（各浏览器兼容）

    /*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...

  8. CSS实现背景透明，文字不透明（各浏览器兼容） (转)

    /*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center ...

  9. css如何实现背景透明，文字不透明？

    之前做了个半透明弹层,但设置背景半透明时,子元素包含的字体及其它元素也都变成了半透明.对opacity这个属性认识的不透彻,在这里做一些总结,方便以后使用.   背景透明,文字不透明的解决方法:   ...

随机推荐

  1. shell脚本中生成延时

    #!/bin/bash echo -n count: tput sc count=; while true; do ]; then let count++; ; tput rc tput ed ech ...

  2. java中System.getenv和System.getProperties的区别

    System.getenv获取的是系统的环境变量(就是用户在操作系统中设置的环境变量),windows和linux下环境变量的设置就不说了哦. System.getProperties获取的是系统的相 ...

  3. 6.bootstrap练习笔记-缩略图和list-group

    bootstrap练习笔记-缩略图 1.其实缩略图很简单,只要按照固定的格式来设计 div.container 总容器  在宽度为1200px以上 div.row 一行内容 div.col-lg-3. ...

  4. BZOJ 4423 【AMPPZ2013】 Bytehattan

    Description 比特哈顿镇有n*n个格点,形成了一个网格图.一开始整张图是完整的. 有k次操作,每次会删掉图中的一条边(u,v),你需要回答在删除这条边之后u和v是否仍然连通. Input 第 ...

  5. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 检查版本升级、检查登录超时

    当用户都在一个公司内,甚至一个办公室时,喉一下或者跑过去亲自更新一下程序,就可以了,问题就很简单也没多少复杂性,也不怎么考验技术能力.当面对全国10万以上客户端时,问题就来了. 1:有的用户打开系统一 ...

  6. ASP.NET MVC - 创建Internet 应用程序

    为了学习 ASP.NET MVC,我们将构建一个 Internet 应用程序. 第 1 部分:创建应用程序. 我们将构建什么 我们将构建一个支持添加.编辑.删除和列出数据库存储信息的 Internet ...

  7. 从客户端(Content="<EM ><STRONG ><U >这是测试这...")中检测到有潜在危险的Request.Form 值。

    说明: 请求验证过程检测到有潜在危险的客户端输入值,对请求的处理已经中止.该值可能指示存在危及应用程序安全的尝试,如跨站点脚本攻击.若要允许页面重写应用程序请求验证设置,请将 httpRuntime  ...

  8. Intelij IDEA解决Dependency无法更新问题

    在使用Intelij IDEA的时候,发现核心的组件没有被更新,于是发现了这篇文章可以解决这个问题: Force Intellij IDEA to reread all maven dependenc ...

  9. [网络安全] [视频分享]KaLi Linux基础培训2016 最新的哦【福吧资源网】

    最新的教程同时针对kali linux2016最新版本的多个问题解决办法还有一些实例利用. 下载地址:http://www.fu83.cn/thread-310-1-1.html

  10. 记一次排错，windows日志 模块 DLL C:\Windows\system32\inetsrv\aspnetcore.dll 未能加载。返回的数据为错误信息。

    这个错误是在我本地开发环境,不是生产环境,如果是生产环境我就挂了....开发环境也痛苦啊,重装系统的话,我估计装系统+所有软件,少说也得1天..... 错误产生:重装IIS (尼玛,IIS总有一个小毛 ...