码迷,mamicode.com
首页 > Web开发 > 详细

CSS实现半透明的方法

时间:2015-07-01 23:22:37      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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

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

 1 <div id="out">
 2     <div id="in">不透明<div>
 3     <div id="alpha">半透明<div>
 4 <div>
 5 <style type="text/css">
 6 #out{
 7    padding:20px 0;
 8    height:100px;
 9    width:200px;
10    position:relative;
11 }
12 #in{
13   background:#fff;
14   margin:0 10px;
15 }
16 #alpha{
17      position: absolute;
18      top:0;
19      left: 0;
20      width: 100%;
21      height:100%;
22      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*IE8*/
23      filter:alpha(opacity=30);  /*IE5、IE5.5、IE6、IE7*/
24      opacity: .3;  /*Opera9.0+、Firefox1.5+、Safari、Chrome*/
25      z-index: -1;  /*让其位于in的下面*/
26      background:#fff;
27 }
28 </style>

 

CSS实现半透明的方法

标签:

原文地址:http://www.cnblogs.com/jweb/p/4614757.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!