般透明色的實現

半透明實現

一、div css半透明基礎介紹 - top

設定div半透明css**：

div

說明：

1、filter：對win ie設定半透明濾鏡效果，filter:alpha(opacity=80)代表該物件80%半透明，火狐瀏覽器不認

2、-moz-opacity：對mozilla firefox火狐瀏覽器實現半透明，win ie不認此屬性，-moz-opacity:0.5相當於設定半透明為50%

3、opacity：對除ie外所有瀏覽器支援包括谷歌，放最後主要針對谷歌瀏覽器，opacity: 0.5;表示設定50%半透明

為了觀察到對div半透明實現，我們設定兩個div層，分別乙個放於另外乙個div層內，外層div命名為「.div-a」;上面被包含的層css類命名為「.div-b」，形成「.div-b」盒子放於「.div-a」內

我們對底層div設定乙個背景是一張，上面的div盒子設定村黑色。

二、未設定半透明樣式例項 - top

1、根據描述例項，未設定半透明html源**：

div半透明例項演示

2、未設定半透明css樣式截圖：

未設定半透明時截圖

未設定半透明樣式未實現半透明例項瀏覽器中效果截圖

三、對div設定css半透明樣式例項 - top

1、我們對「.div-b」選擇器加入半透明樣式**：

filter:alpha(opacity=60);-moz-opacity:0.6;opacity: 0.6;

設定60%半透明效果

完整例項網頁html**如下：

實現div半透明例項演示

2、在瀏覽器效果截圖：

css div半透明實現截圖

css+div實現半透明瀏覽器中瀏覽實現div半透明效果截圖

總結：根據以上兩個例項，第乙個沒有設定半透明樣式，另外乙個設定半透明樣式而實現了div層半透明效果，大家可以根據需要調整半透明值，實現想要半透明度。設定半透明效果要考慮ie瀏覽器、谷歌、火狐等瀏覽器相容支援，所以我們半透明樣式**務必完整。