IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
生活随笔
收集整理的這篇文章主要介紹了
IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這個世界變化很快,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:0;left: 0;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>http://dancewithnet.com/2006/05/18/css-alpha-transparent/
總結
以上是生活随笔為你收集整理的IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: STM32F4读写内部FLASH【使用库
- 下一篇: HTML5 跨文档消息传输