思路主要是

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十三问[转]

    Shell十三问 转载于网络,稍加整理. (一) 为何叫做Shell? 我们知道计算机的运作不能离开硬件,但使用者却无法直接对硬件作驱动,硬件的驱动只能透过一个称为"操作系统(Operati ...

  2. jQuery validator自定义

    项目中接触到validator,记录下 jQuery.validator.addMethod("isStrongPwd", function(value, element){ va ...

  3. ELF Format 笔记（十）—— 重定位（relocation）

    ilocker:关注 Android 安全(新手) QQ: 2597294287 重定位就是把符号引用与符号定义链接起来的过程,这也是 android linker 的主要工作之一. 当程序中调用一个 ...

  4. switch与ifelse的效率问题

    switch...case与if...else的根本区别在于,switch...case会生成一个跳转表来指示实际的case分支的地址,而这个跳转表的索引号与switch变量的值是相等的.从而,swi ...

  5. gdb脚本

    一.简介 作为UNIX/Linux下使用广泛的调试器,gdb不仅提供了丰富的命令,还引入了对脚本的支持:一种是对已存在的脚本语言支持,比如python,用户可以直接书写python脚本,由gdb调用p ...

  6. Git的使用的简单介绍

    节选自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 git是一个分布式的引擎, ...

  7. [转]说说JSON和JSONP，也许你会豁然开朗，含jQuery用例

    本文转自:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两 ...

  8. mybatic与spring结合的事务管理

    原文地址:http://czj4451.iteye.com/blog/2037759 mybatis与spring结合后,事务管理更加方便,这里介绍使用transactionnal的方式,有错的的地方 ...

  9. c++学习之容器细枝末节（2）

    从昨天到现在,还依然停留在容器的学习上,现在写例程代码顺手多了,看来写代码还是要多多练习才能有感觉. 经过一天的学习,有一下几点知识点让我觉得很有意义: (1)删除容器中的元素的时候,pop_fron ...

  10. 双11遇上ZBrushCore，如此优惠还等什么！

    对不起!让大家久等了,ZBrush简体中文版ZBrushCore这次是真的来了,恰逢双11,老板说了,钱不是问题,你们开心就好,特别是热爱3D的单身狗们!你们那么热爱这个行业,1099元/套终身授权使 ...