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

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

CSS3 opacity 屬性基本語(yǔ)法

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

CSS3 opacity 屬性實(shí)際范例

CSS Code復(fù)制內(nèi)容到剪貼板

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

2. 測(cè)試 CSS3 opacity 屬性的不透明度處理   

3. </div>   

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

5. 測(cè)試 CSS3 opacity 屬性的不透明度處理   

6. </div>   

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

8. 測(cè)試 CSS3 opacity 屬性的不透明度處理   

9. </div>  

范例的輸出效果

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

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

opacity透明度屬性的繼承問題
CSS3的opacity透明度屬性具有繼承性，當(dāng)對(duì)某個(gè)對(duì)象設(shè)置了opacity透明度屬性的時(shí)候，其子集元素也會(huì)有透明度效果；

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)   
   }

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