思路主要是

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. 关于 Java 数组的 12 个最佳方法

    1.  声明一个数组 String[] aArray = new String[5]; String[] bArray = {"a","b","c&q ...

  2. 【转】深入理解 Java 垃圾回收机制

    深入理解 Java 垃圾回收机制   一.垃圾回收机制的意义 Java语言中一个显著的特点就是引入了垃圾回收机制,使c++程序员最头疼的内存管理的问题迎刃而解,它使得Java程序员在编写程序的时候不再 ...

  3. swift判断是否真机or模拟器

    之前一直用的这种,不知道为什么不怎么靠谱 #if TARGET_IPHONE_SIMULATOR//模拟器 #else//真机 #endif 现在用这种: if Platform.isSimulato ...

  4. Ubuntu 系统 update-rc.d 命令

    Ubuntu或者Debian系统中update-rc.d命令,是用来更新系统启动项的脚本.这些脚本的链接位于/etc/rcN.d/目录,对应脚本位于/etc/init.d/目录.在了解update-r ...

  5. HTML总结

    几个知识点: HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML框架结构: <!DOCTYPE html> <html> < ...

  6. IntelliJ IDEA 乱码解决方案 （项目代码、控制台等）

    IntelliJ IDEA 乱码解决方案 (项目代码.控制台等) 最近IDE从eclipse改成IntelliJ IDEA 了,原因是公司大部分人都在用这个IDE,而且一直推荐用,所以尝尝鲜.换的第一 ...

  7. VC++/MFC(VC6)开发技术精品学习资料下载汇总

    工欲善其事,必先利其器,VC开发MFC Windows程序,Visual C++或Visual Studio是必须的,恩,这里都给你总结好了,拿去吧:VC/MFC开发必备Visual C++.Visu ...

  8. iPhone添加邮箱

    阿里云邮箱设置 手机自带的电子邮件客户端该如何添加阿里云邮账号呢?这里以iPhone4s和安卓系统为例,分别进行添加阿里云邮箱帐号的添加.   官网是这么介绍的:   一.如下以iPhone4s为例, ...

  9. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 员工离职管理

    当公司有几万人,上千家加盟网点,几个庞大的直属分公司后,系统账户的有效管理也是一个头疼的问题,把所有的帐户及时进行科学的管理,有人员离职时及时进行记录,防止离职人员的系统账户有各种安全漏洞. 谁什么时 ...

  10. 用table做网页，设置了border为1px怎么还是觉得很粗？

    设置边框重叠 border-collapse:collapse;  /*边框重叠*/ 例: <table width="700" style="border-col ...