全透明代码:{background:transparent}
半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !important;width:100%}

其他的还有不少文章,有个不错,如何用CSS实现背景半透明效果?

内容详细如下:
http://llf535.cn 龙行天下 精彩内容等着你

引用
如何用CSS实现背景半透明效果?做过活动页面的同学可能会遇到要做背景半透明的效果,我们一般的做法是用两个层,一个用于放文字,另一个用于做透明背景,因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现,我们有更简单的做法:
HTML代码:

<div class="alpha1">
  <div class="ap2">
      <p>背景为红色(#FF0000),透明度20%。</p>
  </div>
</div>

CSS代码:

.alpha1{
    width:300px;
    height:200px;
    background-color:#FF0000;
    filter: Alpha(Opacity=30);
}
.ap2{
    position:relative;
}

  这样基本就可以实现啦,也不用担心定位和自适应问题,最大的问题是仅IE支持。

  如果兼容FF、OP怎么写呢?首先,上面这种定法是不行的啦,那就只能用两个层重叠的方法啦。

  改下页面结构与CSS样式:

HTML代码:

<div class="alpha1">
  <div class="ap2">
      <p>背景为红色(#FF0000),透明度20%。</p>
  </div>
  <!--[if IE]><![if !IE]><![endif]--> <div class="alpha2"></div> <!--[if IE]><![endif]><![endif]-->
</div>

CSS代码:

.alpha1,.alpha2{
    width:100%;
    height:auto;
    min-height:250px;/* 必需 */
    _height:250px;/* 必需 */
    overflow:hidden;
    background-color:#FF0000;/* 背景色 */
}
.alpha1{
    filter:alpha(opacity=20); /* IE 透明度20% */
}
.alpha2{
    background-color:#FFFFFF;
    -moz-opacity:0.8; /* Moz + FF 透明度20%*/
    opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)透明度20%*/
}
.ap2{
    position:absolute;
}

CSS实现背景透明/半透明效果的方法的更多相关文章

  1. JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...

  2. Activity透明/半透明效果的设置transparent(两种实现方法)

    两种方法实现Activity透明/半透明效果的设置,代码思路很有调理,感兴趣的朋友可以参考下,希望本文可以帮助到你   方法一:res/values文件夹下建立styles.xml: 复制代码代码如下 ...

  3. CSS实现背景透明,文字不透明(各浏览器兼容)

    /*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...

  4. CSS实现背景透明,文字不透明(各浏览器兼容) (转)

    /*CSS*/ .waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center ...

  5. 设置div背景透明的两种方法

    实现div背景透明的两种方法 1.使用opacity属性 background-color:#000; opacity: 0.5; 这样做可以设置div内部所以区域的透明度,但是也会影响里面的文字,效 ...

  6. CSS实现背景透明而背景上的文字不透明完美解决

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

  7. 使IE6下PNG背景透明的七种方法任你选

    原文地址:http://blog.csdn.net/mosliang/article/details/6760028 相信如何解决png在ie6下透明的问题困扰了很多人.为了追求更好的页面效果,很多人 ...

  8. 解决css设置背景透明,文字不透明

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

  9. CSS实现背景透明而背景上的文字不透明

    在我们设计制作一些网页的时候可能会用到半透明的效果,首先我们可能会想到用PNG图片处理,当然这是一个不错的办法,唯一的兼容性问题就是ie6 下的BUG,但这也不困难,加上一段js处理就行了.但假如我们 ...

随机推荐

  1. 当 IDENTITY_INSERT 设置为 OFF 时,不能为表中的标识列插入显式值。

    出现以上错误是应为在执行insert语句时,将自动增加的字段加入,导致报错. 解决办法:把自增列的字段从插入语句中删除

  2. C/C++ char和int的区别

    字符字面值一般是用一对单引号来表示.char类型一般就是用字符字面值来初始化.赋值.由于char类型的是单字节长度,当给char类型的变量用字符字面值赋值时,当单引号里面的内容超过一个字节时,系统会自 ...

  3. 不知道算不算另类的ASP.NET MVC4 Ajax分页

    以往用Ajax来实现无刷新分页,用户一按F5,页数就记不住了,点了一个链接也是同一个问题,再想回退回来,就回到第一页了.上次看到一篇文章,说到window.location.hash的用途,于是萌生了 ...

  4. 拍照-----------android系统 至关重要的功能

    一 在Android 中,拍照对应的Action 是android.provider.MediaStore.ACTION_IMAGE_CAPTURE. 用于拍照的Activity 需要返回照片图像数据 ...

  5. 如何看懂XDEBUG+WEBGRIND?(转)

    看到一个很有用的东东,收藏.. http://blog.csdn.net/yukon12345/article/details/11408617 ~~~~~~~~~~ 使用:              ...

  6. 开始慢慢学习这本书了。。Python编程实战:运用设计模式、并发和程序库创建高质量程序

    没办法,不到设计模式,算法组合这些,在写大一点程序的时候,总是力不从心...:( 一开始可能要花很多时间来慢慢理解吧,,这毕竟和<大话设计模式>用的C#语言有点不太一样... 书上代码是3 ...

  7. IIC总线协议---以存储芯片at24c64为例

    IIC总线协议 前言:年前给老师做个红外抄表系统,,现在对当中用到的一些模块总结一下. 1.只有在总线空闲时才允许启动数据传送. 2.在数据传送过程中,当时钟线为高电平时,数据线必须保持稳定状态,不允 ...

  8. TortoiseGit 使用教程

    原文地址:http://blog.csdn.net/ethan_xue/article/details/7749639 git的使用越来越广泛 使用命令比较麻烦,下面讲解一下tortoisegit的使 ...

  9. 页面onclick()中传值问题

    html中onclick()里面传变量到javascript中的问题,小小的记录下: 传变量的话一定要加  '' <span onclick="sellGoods('${session ...

  10. phpcms:四、尾部包含

    四.尾部包含1.包含尾部文件:{template "content","footer"}2.栏目列表调用(关于我们| 联系方式| 版权声明| 招聘信息|):{p ...