CSS3中的透明属性opacity的用法实例
生活随笔
收集整理的這篇文章主要介紹了
CSS3中的透明属性opacity的用法实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
實例
設置 div 元素的不透明級別：
div { opacity:0.5; }完整例子：<!DOCTYPE html> <html> <head> <style> div { background-color:red; opacity:0.5; filter:Alpha(opacity=50); /* IE8 以及更早的瀏覽器 */ } </style> </head> <body><div>本元素的不透明度是 0.5。請注意，文本和背景色都受到不透明級別的影響。</div></body> </html>您可以在本頁底部找到更多實例。
瀏覽器支持
所有瀏覽器都支持 opacity 屬性。
注釋：IE8 以及更早的版本支持替代的 filter 屬性。例如：filter:Alpha(opacity=50)。
定義和用法
opacity 屬性設置元素的不透明級別。
| 1 |
| no |
| CSS3 |
| object.style.opacity=0.5 |
語法
opacity: value|inherit;| value | 規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。 | 測試 |
| inherit | 應該從父元素繼承 opacity 屬性的值。 |
親自試一試 - 實例
<!DOCTYPE html><html><head><script>function ChangeOpacity(x){// 返回被選選項的文本var opacity=x.options[x.selectedIndex].text;var el=document.getElementById("p1");if (el.style.opacity!==undefined)? {el.style.opacity=opacity;}else? {alert("Your browser doesn't support this example!");}}</script></head><body><p id="p1">請從下面的例子中選擇一個值，以改變此元素的不透明度。</p><select οnchange="ChangeOpacity(this);" size="5">? <option />0? <option />0.2? <option />0.5? <option />0.8? <option selected="selected" />1</select>
</body></html>
總結
以上是生活随笔為你收集整理的CSS3中的透明属性opacity的用法实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS块元素水平垂直居中的实现技巧
- 下一篇： CSS3中使用translate() 方