设置元素的透明度:

 -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. java 查看线程的信息

    的代码上加上 断点 运行 进入Terminal jps 查看进程号 jstack 进程号  查看线程的信息 jstack pid 此时进去DEBUG 端F9 跑完程序 再回到Terminal 中 就能 ...

  2. Cache Line 伪共享发现与优化

    https://yq.aliyun.com/articles/465504 Cache Line 伪共享发现与优化 作者:吴一昊,杨勇 1. 关于本文 本文基于 Joe Mario 的一篇博客 改编而 ...

  3. 基于Centos搭建Django 环境搭建

    CentOS 7.2 64 位操作系统 安装 Django 先安装 PIP,再通过 PIP 安装 Django 安装 PIP cd /data; mkdir tmp; cd tmp; wget htt ...

  4. WCF中记录SOAP消息日志

    Windows Communication Foundation (WCF) 默认启用消息日志,WCF使用了在System.Diagnostics名称空间中定义的跟踪机制.在这个跟踪机制中,通过在配置 ...

  5. 小白学python时候总会遇到的几个问题

    最近又在跟之前的同学一起学习python,一起进步,发现很多测试同学在初学python的时候很容易犯一些错误,特意总结了一下.其实这些错误不仅是在学python时会碰到,在学习其他语言的时候也同样会碰 ...

  6. Java对象的内存实际占用

    一.打包和使用方法参考我之前的这篇文章,本文主要是更新了测量的类及方法,实际测试这个方法更准确. https://www.cnblogs.com/yoyotl/p/8421287.html 二.新的测 ...

  7. GraphQL,你准备好了么?

    一个多月前,facebook 将其开源了一年多的 GraphQL 标记为 production ready ( http://graphql.org/blog/production-ready/ ), ...

  8. Socket网络编程--小小网盘程序(5)

    各位好呀!这一小节应该就是这个小小网盘程序的最后一小节了,这一节将实现最后的三个功能,即列出用户在服务器中的文件列表,还有删除用户在服务器中的文件,最后的可以共享文件给好友. 列出用户在服务器中的文件 ...

  9. linux每日命令(35):grep命令

    Linux系统中grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹 配的行打印出来.grep全称是Global Regular Expression Print,表示全局正则表达 ...

  10. 【Android】Android的快速开发框架Afinal

    Afinal简介 Afinal是一个android的ioc,orm框架,内置了四大模块功能:FinalAcitivity,FinalBitmap,FinalDb,FinalHttp. 通过finalA ...