IE8不支持以前{filter:alpha(opacity=50);}的私有属性,

转而支持更规范的私有属性-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

加之Firefox2.0和Opera9.0以前版本很少见到,

所以所有的主流浏览器都已经支持纯CSS而不用png图片来实现半透明效果,

 <div id="out">
<div id="in">不透明<div>
<div id="alpha">半透明<div>
<div>
<style type="text/css">
#out{
padding:20px 0;
height:100px;
width:200px;
position:relative;
}
#in{
background:#fff;
margin:0 10px;
}
#alpha{
position: absolute;
top:;
left:;
width: 100%;
height:100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*IE8*/
filter:alpha(opacity=30); /*IE5、IE5.5、IE6、IE7*/
opacity: .3; /*Opera9.0+、Firefox1.5+、Safari、Chrome*/
z-index: -1; /*让其位于in的下面*/
background:#fff;
}
</style>

CSS实现半透明的方法的更多相关文章

  1. CSharpGL(40)一种极其简单的半透明渲染方法

    CSharpGL(40)一种极其简单的半透明渲染方法 开始 这里介绍一个实现半透明渲染效果的方法.此方法极其简单,不拖累渲染速度,但是不能适用所有的情况. 如下图所示,可以让包围盒显示为半透明效果. ...

  2. 为IE单独写CSS的三种方法

    本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html 因为万恶的 IE 存在各种的不标准,因此, ...

  3. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  4. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  5. CSS中垂直居中的方法

    昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...

  6. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

  7. CSS模糊效果及其兼容方法

    今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...

  8. div+css隐藏内容样式方法

    div css隐藏内容样式方法     div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...

  9. CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)

    建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...

随机推荐

  1. HDU 1698 Just a Hook 区间更新 lazy标记

    lazy标记 #include <iostream> #include <cstdio> #include <cstring> #include <sstre ...

  2. Matlab GUI界面

    做SVD的时候,看学姐的demo,用到了matlab的GUI,感兴趣就自己学了一下: 从简单的例子说起吧. 创建Matlab GUI界面通常有两种方式: 1,使用 .m 文件直接动态添加控件     ...

  3. STL --最常见的容器使用要点

    如果只是要找到STL某个容器的用法, 可以参考msdn和C++ Library Reference,msdn 上面的知识点应该是最新的,C++ Library Reference虽古老但是很多经典的容 ...

  4. Lodop Web打印插件使用

    <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" st ...

  5. android微信分享遇到的问题

    1.WXWebpageObject.description 长度不能超过1024 2.若回调返回BaseResp.ErrCode.ERR_AUTH_DENIED(用户拒绝),请检查AppID是否填写正 ...

  6. python 使用__slots__

    正常情况下,当我们定义了一个class,创建了一个class的实例后,我们可以给该实例绑定任何属性和方法,这就是动态语言的灵活性.先定义class: >>> class Studen ...

  7. [一位菜鸟的COCOS-2D编程之路]打飞机中机种敌机和战机损毁时的爆炸效果

    1.第一步,添加爆炸动画 //添加玩家飞机飞行动画 id _playerFlyAction; id _playerBlowupAnimation; //战机爆炸动画 id _enemyBlowupAn ...

  8. css3动画属性中的transition属性

    一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...

  9. jeasyUI属性列表

    属性分为CSS片段和JS片段. CSS类定义:1.div easyui-window        生成一个window窗口样式.      属性如下:                   1)mod ...

  10. zigbee 学习记录之一:资料搜索

    先从网络来一段资料吧,在学习过程中慢慢整理资料. <由于zigbee 以cc2530 51单片机为基础,Zstack为源头,比较成熟了,学习和摸索就从Zstack开始吧.没有师傅,就有从网络上大 ...