opacity在IE6~8下无效果，解决的办法

问题出现时rgba()在ie6下不出效果，最后查到是opacity的问题。

opacity是css3时出现的，目前主流浏览器都支持。but老IE是个麻烦的问题。

filter:alpha(opacity=50);

总结网上经验： 1 <!doctype html>

 <html>

 <head>

     <meta charset='utf-8'>

     <meta name='author' content='w201604007-宋英杰'>

     <title>opacity</title>

     <style type='text/css'>

         html,body,div{margin:0;padding:0;}

         body{background:#FFF;}

         .s1{font-family:serif;

         background-color:rgb(120,160,9);opacity:0.4;/*ff46,chrome49,opara36,ie9不透明度,透明度效果，包括了文字*/

         zoom:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);/*ie透明度效果，包括了文字*/
　　　　　　filter:alpha(opacity=40);zoom:1;position:static;
}
　　　　　　.s1 span{color:#000;position:relative;}/*文字、背景分离分别给样式,结合定位2.16.5.28更新*/

     </style>

 </head>

 <body>

     <p class="s1"><span>serif字体</span></p>

 </body>

 </html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

直接rgba对底色加样式，再兼容ie6，代码如下：

 <!doctype html>

 <html>

 <head>

     <meta charset='utf-8'>

     <meta name='author' content='w201604007-宋英杰'>

     <title>opacity</title>

     <style type='text/css'>

         html,body,div{margin:0;padding:0;}

         body{background:#FFF;}

         .s1{font-family:serif;

         background-color:rgba(169,169,169,0.7);/*opacity:0.4;ff46,chrome49,opara36,ie9不透明度,文字无*/

         zoom:1;filter:alpha(opacity=70)progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9,endColorstr=#A9A9A9);

         /*ie6测试，底色变成了#c2c2c2,有透明度效果，但也包括了文字*/

     </style>

 </head>

 <body>

     <p class="s1"><span>serif字体</span></p>

 </body>

 </html>

抛砖引玉，有更好的方法，大家可以评论告知，互相学习。

opacity在IE6~8下无效果，解决的办法的更多相关文章

  1. [转]position:fixed; 在IE9下无效果的问题

    本文转自:http://www.cnblogs.com/xinwang/archive/2013/04/06/3002384.html 平常DIV+CSS布局时,position属性一般用absoul ...

  2. MySQL修改编码为UTF-8无效果解决办法

    本来这是一件很简单的事,有很多博客里都有教程,但却足足花了我半天的时间才解决问题. 可能是因为我的MySQL安装时没有选择默认路径的原因,按照网上的教程修改了下图中的my.ini配置文件后编码并没有发 ...

  3. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  4. IE6条件下的bug与常见的bug及其解决方法

    1.IE6条件下有双倍的margin 解决办法:给这个浮动元素增加display:inline属性 2. 图片底部有3像素问题 解决办法:display:block;或者vertical-align: ...

  5. 使用ie的filter来解决rgba在IE8下没有效果的问题

    使用ie的filter来解决rgba在IE8下没有效果的问题,css代码如下: background: rgba(255,255,255,0.1); filter:progid:DXImageTran ...

  6. 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

    一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

  7. PNG24在ie6下的完美解决方法!(DD_belatedPNG)

    原网址:http://www.zjgsq.com/1629.html 之前写过一篇<js+css滤镜设置解决PNG24在IE6下显示问题> 解决方法不是很完美,使用起来也比较麻烦. DD_ ...

  8. 虚拟机——mnt_hgfs下无目录情况解决

    /mnt/hgfs下无目录情况解决: VMware8虚拟机安装Ubuntu 11.10使用share folders共享目录将虚拟机掉电关闭(不能暂停),设置share folders目录,重启虚拟机 ...

  9. nmtui解决network-scripts目录下无网卡对应配置文件问题

    1.问题出现的原因设备先安装了操作系统,后插上网卡到设备,就会出现/etc/sysconfig/network-scripts目录下无该网卡对应配置文件的问题,但是ifconfig命令能看见系统给该网 ...

随机推荐

  1. 【思路解析】discuz　帖子设置封面 setthreadcover 表pre_forum_threadimage

    在Discuz 中有一项就是给帖子设置封面,很多情况下只能通过手动的方式去设置或者用提交POST请求的式去设置: 但是这都是调用DISCUZ的功能设置的: 有的时候并非万能的,也有用不到的时候:下面就 ...

  2. hdu 5591 ZYB's Game

    Problem Description ZYB played a game named NumberBomb with his classmates ,N] in mind,then players ...

  3. 一封在JSP课程结束之后给学生的信

    <JSP应用程序设计>这门课终于考完了,虽然题目有点难,但我看大部分同学考的还可以,算上平时成绩应该都能拿到一个满意的分数. 再次感谢大家一个学期来对我的支持,跟大家一起的这个学期很开心, ...

  4. css3 翻转和旋转的差别

    我曾经一直以为旋转跟翻转一样,今日自己旋转了好久都发觉跟翻转差一点点,纠结了十几分钟才明确,仅仅能怪自己的立体感太差了. css3中的transform中有旋转,放缩,倾斜,平移的功能,分别相应的属性 ...

  5. 汇编语言学习系列 for循环实现

    假如汇编语言要实现如下C语言的功能,编译环境Ubuntu14.04(32位). #include<stdio.h> int fact_for(int n) { int i; ; ; i & ...

  6. leetcode Remove Duplicates from Sorted Array python

    class Solution(object): def removeDuplicates(self,nums): if len(nums) <= 0: return 0 j=0 for i in ...

  7. Javascript基础示例：用JS写简易版贪吃蛇（面向对象）

    废话不多说,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  8. MySql数据库root密码修改

    方法一: 在my.ini的[mysqld]字段加入:skip-grant-tables重启mysql服务,这时的mysql不需要密码即可登录数据库 然后进入mysqlmysql>use mysq ...

  9. mysql建立数据库的方法

    mysql建立数据库的方法 方法一:使用create mysql> create database roudy; Query OK, 1 row affected (0.00 sec) mysq ...

  10. 数字时钟DigClock

    首先建立数字显示类: using System; using System.Drawing; namespace CsDev { class SevenSegmentDispay { Graphics ...