设置元素的透明度:

 -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. android makefile文件批量拷贝文件的方法

    该方法是shell 和makefile组合使用 wallpapers := $(shell ls packages/apps/hyst_apps/NewBingoLauncher_C/default_ ...

  2. javascript中return function与return function()的区别

    参考https://stackoverflow.com/questions/7629891/functions-that-return-a-function-javascript 问题:唯一的区别是r ...

  3. vbox磁盘空间如何扩容

    vbox磁盘空间如何扩容   为虚拟机硬盘扩容(Oracle VM VirtualBox) VBoxManage modifyhd         <uuid>|<filename& ...

  4. windows下JDK环境配置

    原文地址:http://blog.sina.com.cn/s/blog_618592ea0100oeif.html 一.JDK1.6下载 目前JDK最新版本是JDK1.6,到http://java.s ...

  5. Effective Java 第三版——44. 优先使用标准的函数式接口

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

  6. SNF快速开发平台MVC-表格单元格合并组件

    1.   表格单元格合并组件 1.1.      效果展示 1.1.1.    页面展现表格合并单元格 图 4.1 1.1.2.    导出excel合并单元格 图 4.2 1.2.      调用说 ...

  7. 【Netty】通俗地讲,Netty 能做什么?

    作者:郭无心链接:https://www.zhihu.com/question/24322387/answer/78947405来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. GNU Binutils简介及基本用法

    [时间:2017-06] [状态:Open] [关键词:GNU, binutils, as, ld, ar, 基础工具,linux,链接器,汇编器] 0 简介 GNU Binary Utilities ...

  9. 清理configure脚本生成的文件

    今天在修改dovecot的代码时遇到一个问题,需要重新执行configure脚本,想先把之前configure生成的文件删除掉. 结果看了configure --help没有找到可以用的命令,最后搜了 ...

  10. html 用一个frame刷新另一个frame(同一个Frameset中)

    假设主页面index.html,其中frameset结构如下所示: <html> <head> <meta http-equiv="Content-Type&q ...