?
This document uses PHP Chinese website manual Release
opacity:<number>
默認(rèn)值:1
適用于:所有元素
繼承性:無(wú)
動(dòng)畫(huà)性:是
計(jì)算值:指定值
<number>:
使用浮點(diǎn)數(shù)指定對(duì)象的不透明度。值被約束在[0.0-1.0]范圍內(nèi),如果超過(guò)了這個(gè)范圍,其計(jì)算結(jié)果將截取到與之最相近的值。
對(duì)于尚不支持opacity屬性的IE瀏覽器可以使用IE私有的濾鏡屬性來(lái)實(shí)現(xiàn)與opacity相同的效果
示例代碼:
div{filter:alpha(opacity=50);} /* for IE8 and earlier */ div{opacity:.5;} /* for IE9 and other browsers */
以上2段代碼的效果相同
元素定義了值小于1的opacity,將會(huì)產(chǎn)生局部層疊上下文。
對(duì)應(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參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)</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>下例是一個(gè)半透明的效果:</h1> <div class="test">不透明度為100%的box</div> <div class="test2">不透明度為50%的box</div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例