?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
opacity:<number>
默認值:1
適用于:所有元素
繼承性:無
動畫性:是
計算值:指定值
<number>:
使用浮點數(shù)指定對象的不透明度。值被約束在[0.0-1.0]范圍內(nèi),如果超過了這個范圍,其計算結(jié)果將截取到與之最相近的值。
對于尚不支持opacity屬性的IE瀏覽器可以使用IE私有的濾鏡屬性來實現(xiàn)與opacity相同的效果
示例代碼:
div{filter:alpha(opacity=50);} /* for IE8 and earlier */ div{opacity:.5;} /* for IE9 and other browsers */
以上2段代碼的效果相同
元素定義了值小于1的opacity,將會產(chǎn)生局部層疊上下文。
對應(yīng)的腳本特性為opacity。
淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+ |
9.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>opacity_CSS參考手冊_web前端開發(fā)參考手冊</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> h1 { margin: 10px 0; font-size: 16px; } .test, .test2 { width: 300px; height: 150px; padding: 10px; } .test { background:#050; } .test2 { margin: -120px 0 0 50px; background: #000; filter: alpha(opacity=50); opacity: .5; color: #fff; } </style> </head> <body> <h1>下例是一個半透明的效果:</h1> <div class="test">不透明度為100%的box</div> <div class="test2">不透明度為50%的box</div> </body> </html>
點擊 "運行實例" 按鈕查看在線實例