如何在CSS3中使用opacity屬性設置透明效果

本篇文章為大家展示了如何在CSS3中使用opacity屬性設置透明效果，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

CSS3 opacity 屬性基本語法

opacity: 不透明度;
CSS3 opacity 屬性參數的＂不透明度＂是以數字表示，從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0，換句話說，數字越大代表元素越不透明。參數除了可以使用＂不透明度＂之外，還有 inherit 繼承父層屬性，不過瀏覽器支援度較差，不建議使用。

CSS3 opacity 屬性實際范例

CSS Code復制內容到剪貼板

1. <div style="padding:10px;background-color:green;opacity:0.1;">   

2. 測試 CSS3 opacity 屬性的不透明度處理   

3. </div>   

4. <div style="padding:10px;background-color:green;opacity:0.5;">   

5. 測試 CSS3 opacity 屬性的不透明度處理   

6. </div>   

7. <div style="padding:10px;background-color:green;opacity:0.8;">   

8. 測試 CSS3 opacity 屬性的不透明度處理   

9. </div>  

范例的輸出效果

范例共準備了三個加入 opacity 效果的 DIV 區塊，各位可以注意到從最上面開始的第一個區塊，不透明度為 0.1（opacity:0.1）所以整個區塊變成幾乎快看不到顏色與文字，第二個區塊不透明度設為 0.5（opacity:0.5），所以比第一個區塊清楚多了，第三個區塊再度降低不透明度到 0.8，文字與背景顏色都越更加明顯，這就是 CSS3 opacity 屬性的實際效果，由范例可以很清楚的看到，一個 DIV 區塊內的文字內容與背景顏色（background-color）都會受到 opacity 屬性的不透明度影響。

補充：目前新版的主流瀏覽器均有支援 CSS3 opacity 屬性，但需要注意的是 IE8 以即更早版本的 IE 瀏覽器必須使用替代語法來實做，所謂的替代語法是利用 filter 屬性，寫法如「filter:Alpha(opacity=50);」，效果等于「opacity:0.5」。

opacity透明度屬性的繼承問題
CSS3的opacity透明度屬性具有繼承性，當對某個對象設置了opacity透明度屬性的時候，其子集元素也會有透明度效果；

1. <div class="main">  
     <div class="div1">  
       <p>背景色為rgb的opacity效果</p>  
     </div>  
     <div class="div2">  
       <p>背景色為rgba的透明效果</p>  
     </div>  
   </div>

CSS：

1. 
   

   
   

2. .main{   
     clear:rightright;   
     margin:20% auto;   
     overflow:hidden;   
     width:335px;   
   }   
   .main div{   
     color:red;   
     float:left;   
     display:inline-block;   
     width:160px;   
     height:160px;   
     text-align:center;   
   }   
   /*使用opacity透明屬性的顯示效果*/  
   .div1{background-color:rgb(0,0,0);   
     opacity:0.5;   
     filter:alpha(opacity=50);   
     -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';margin-right:15px;   
   }   
   .div1 p{   
     position:relative;   
   }   
   /*使用rgba色顯示的效果*/  
   .div2{   
     background:rgba(0,0,0,.5)   
   }

上述內容就是如何在CSS3中使用opacity屬性設置透明效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。