设置元素的透明度:

 -moz-opacity:0.8; /*在Firefox中设置元素透明度
 filter: alpha(opacity=80); /*ie使用滤镜设置透明
 
但是当我们对一个标签设置背景的透明度时,往往我们并不希望该标签上的文字图片也变成半透明了。
 
例如:
 <div><p>不透明</p></div>
 
div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500px;
 height:500px;color:#F30; font-size:32px; font-weight:bold; }
 
可以很明显的看出文字也被半透明的,这是我们不想看到的效果。
 以前我曾经是绝对定位的方法解决这个问题,也就是现在的p并不是div的子元素。
 
<div></div>
 <p>不透明</p>
 
这样div的半透明效果也就不会影响到元素p了。最后在将p定位到需要的位置。
 但是很多时候这样的标签并不是很合理,有可能还会多浪费几个标签。
 
下面的这种方法就可以解决上面的问题了:
 div{background:rgba(0,0,0,0.2) none repeat scroll !important; /*实现FF背景透明,文字不透明*/
background:#000; filter:Alpha(opacity=20);/*实现IE背景透明*/ 
 width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}
 div p{ position:relative;}/*实现IE文字不透明*/
 
火狐我们直接用rgba颜色就可以解决子标签跟着半透明的问题了,但是ie还不是能很好的支持。
 所以我们给不想被透明的标签设置一个定位属性,问题接能解决了。

解决css设置背景透明,文字不透明的更多相关文章

  1. css实现背景半透明文字不透明的效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. css背景透明文字不透明

    测试背景透明度为0.3.文字不透明: background-color: #000; /* 一.CSS3的opacity */ opacity: 0.3; /* 兼容浏览器为:firefox,chro ...

  3. css 设置背景图片模糊,内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

  4. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  5. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  6. css实现背景透明文字不透明

    设置元素的透明度:  -moz-opacity:0.8; /*在Firefox中设置元素透明度  filter: alpha(opacity=80); /*ie使用滤镜设置透明   但是当我们对一个标 ...

  7. CSS3实现背景透明文字不透明

    最近遇到一个需求,如下图,input框要有透明效果 首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了 这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导 ...

  8. css3背景透明文字不透明

    在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜fi ...

  9. 背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5为例)

    以背景黑色,透明度0.5举例为大家详细介绍下关于背景透明,文字不透明的最佳方法同时兼容IE,具体实现如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 以背景黑色,透明度0.5举例 非IE:backgr ...

随机推荐

  1. 了解 JavaScript (3)- 马上开始

    之前演示了一个 Hello World 程序,而后讲解了一些基础概念,下面开始一些基础工作. 将脚本放在哪里 脚本可以放置在两个位置 <head></head>之间,头脚本(h ...

  2. Apache Kafka学习 (二) - 多代理(broker)集群

    1. 配置server.properties > cp config/server.properties config/server-1.properties> cp config/ser ...

  3. centos7安装配置mysql5.6

    1. 下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 2. 安装mysql-co ...

  4. 一个可以参考的JVM内存分配

    下面是java命令有关JVM内存分配的参数 JAVA_MEM_OPTS="" BITS=`java -version >& | -bit` if [ -n " ...

  5. Attempt to present <TestViewController2: 0x7fd7f8d10f30> on <ViewController: 0x7fd7f8c054c0> whose view is not in the window hierarchy!

    当 storyboard里面的 按钮 即连接了 类文件里面的点击方法  又  连接了   storyboard里 另一个  控制器的  modal 就会出现类似Attempt to present & ...

  6. 【Linux】使用w命令和uptime命令查看系统负载

    在Linux系统中查询系统CPU和内存的负载(使用率)时,我们通常习惯于使用top.atop或者ps,这篇文章将要给大家介绍如何使用w命令和uptime命令来查看系统的负载情况,对于uptime命令, ...

  7. 【转载整理】mysql权限分配详解

    原文:https://www.cnblogs.com/Csir/p/7889953.html MySQL权限级别 1)全局性的管理权限,作用于整个MySQL实例级别 2)数据库级别的权限,作用于某个指 ...

  8. HTML5 完美解决javascript中iphone手机和android手机复制文本到剪切板问题

    1.执行以下解决方案条件:(这个是原理) ①执行复制方法时 所复制文字不能被任何 块级元素和行内块元素和行内元素遮盖否则无效:(解决方案:将文本通过绝对定位或其他方式移除屏幕外) ②ios中不能复制属 ...

  9. Atitit 视图参数解决方案 oracle版和mysql版本 attilax总结.docx

    Atitit 视图参数解决方案 oracle版和mysql版本 attilax总结.docx 1.1. Package机制1 1.2. 全局变量机制1 1.3. 临时表模式,oracle mysql都 ...

  10. python工具 - 批量文件重命名

    日常工作中经常会遇到这样的情况,需要将某个文件夹下的文件按着一定的规则进行重命名,当文件数量及其庞大的时候手工一个一个的去修需要耗费大量的时间,以下python工具可以协助批量修改文件名. 场景:某文 ...