CSS实现半透明的方法
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实现半透明的方法的更多相关文章
- CSharpGL(40)一种极其简单的半透明渲染方法
CSharpGL(40)一种极其简单的半透明渲染方法 开始 这里介绍一个实现半透明渲染效果的方法.此方法极其简单,不拖累渲染速度,但是不能适用所有的情况. 如下图所示,可以让包围盒显示为半透明效果. ...
- 为IE单独写CSS的三种方法
本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html 因为万恶的 IE 存在各种的不标准,因此, ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- CSS清除浮动的方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...
- CSS中垂直居中的方法
昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...
- HTML5结合CSS的三种方法+结合JS的三种方法
HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...
- CSS模糊效果及其兼容方法
今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...
- div+css隐藏内容样式方法
div css隐藏内容样式方法 div+css隐藏内容方法 一般情况下,css隐藏的用途,如下: 1.对文本的隐藏 2.隐藏超链接(另类黑链) 3.对统计代码隐藏 4.隐藏超出图片 5.css ...
- CSS技巧: CSS隐藏文字的方法(CSS text-indent: -9999px;)
建站过过程中朋友喜欢把网站名称用H1表示,但从美观考虑,要用logo图片来代替h1,这时需要隐藏h1内的这段文字,但又不能对搜索引擎不友好,否则就失去了定义h1标签的意义. 在CSS中如何以图代字,找 ...
随机推荐
- sql经典语句
1.表形式如下:Year Salary2000 10002001 20002002 30002003 4000想得到如下形式的查询结 ...
- HDU-4671 Backup Plan 构造解
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4671 假设是3 m,首先按照第一列按照1 2 3 1 2 3 1...排下去,然后个数就是一个 (m/ ...
- openstack rc
#!/bin/bash export OS_PROJECT_DOMAIN_ID=default export OS_USER_DOMAIN_ID=default export OS_PROJECT_N ...
- TCP/IP协议详解内容总结
TCP/IP协议 TCP/IP不是一个协议,而是一个协议族的统称.里面包括IP协议.IMCP协议.TCP协议. TCP/IP分层: 这里有几个需要注意的知识点: 互联网地址:也就是IP地址,一般为 ...
- JS 格式化日期
function formatDate(date){ var year=date.getFullYear(); var month=date.getMonth()+1; var date=date.g ...
- 转载 8天掌握EF的Code First开发之Entity Framework介绍
转载原地址: http://www.cnblogs.com/farb/p/IntroductionToEF.html Entity Framework概要 Entity Framework是微软的O ...
- 知方可补不足~SQL数据库用户的克隆,SQL集群的用户同步问题
我们知道在为sqlserver建立功能数据库时,通过会为库再建立一个登陆名,而这个登陆名时,只用来管理这个数据库,这是安全的,正确的.
- C/C++语言中#的神奇作用:把宏参数字符串化/贴合宏参数
宏中"#"和"##"的用法 一.一般用法 我们使用#把宏参数变为一个字符串,用##把两个宏参数贴合在一起. #define STR(s) #s # ...
- 逻辑网络(Logical Network)
Introduction The VMM documentation indicates that “A logical network is used to organize and simplif ...
- Flex 自动获取焦点 监听全局键盘事件
在mxml里监听addedToStage事件 protected function application1_addedToStageHandler(event:Event):void { this. ...