设置元素的透明度:

 -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. Python实现doc转化pdf

    Python实现doc转化pdf python源码实现doc转化pdf #-*- coding:utf-8 -*- # doc2pdf.py: python script to convert doc ...

  2. 〖Android〗arm-linux-androideabi-gdb报 libpython2.6.so.1.0: cannot open shared object file错误的解决方法

    执行: prebuilts/gcc/linux-x86/arm/arm-linux-androideabi-4.6/bin/arm-linux-androideabi-gdb out/target/p ...

  3. Mac Apache WebDav 服务器配置

    1.WebDav 服务器 基于 http 协议的 "文件" 服务器. 实现文件的上传/下载/修改/删除. WebDav 权限 授权信息的格式 BASIC (用户名:口令)base6 ...

  4. dd测试硬盘性能

    下面直接介绍几种常见的DD命令,先看一下他的区别~ dd bs=64k count=4k if=/dev/zero of=testdd bs=64k count=4k if=/dev/zero of= ...

  5. 在C#用HttpWebRequest中发送GET/HTTP/HTTPS请求(转)

    通用辅助类 下面是我编写的一个辅助类,在这个类中采用了HttpWebRequest中发送GET/HTTP/HTTPS请求,因为有的时候需要获取认证信息(如Cookie),所以返回的是HttpWebRe ...

  6. MXNET:深度学习计算-模型构建

    进入更深的层次:模型构造.参数访问.自定义层和使用 GPU. 模型构建 在多层感知机的实现中,我们首先构造 Sequential 实例,然后依次添加两个全连接层.其中第一层的输出大小为 256,即隐藏 ...

  7. 小patch(psu)的打法 -- 实例

      从patch中的readme来. bug:10214450     测试数据:   SQL> create table t (t timestamp); Table created. SQL ...

  8. [INS-20802] Oracle Net Configuration Assistant failed

    [INS-20802] Oracle Net Configuration Assistant failed.在安装Oracle 11g R2时出现了该错误提示.以前安装的时候没有碰到过类似的错误.原来 ...

  9. 【iCore4 双核心板_ARM】例程十一:DMA实验——存储器到存储器的传输

    实验原理: DAM(直接存储器访问)传输不需要占用CPU,可以在存储器至存储器实现高速的数据 传输.本实验采用DAM2控制器的数据流0,选用通道0进行数据传输.通过LED的颜色来 判断传输是否成功. ...

  10. Ubuntu下的Wine&WineQQ

    一.安装Wine 1.添加PPA sudo add-apt-repository ppa:ubuntu-wine/ppa 2.更新列表 sudo apt-get update 3.安装Wine sud ...