利用CSS，設定半透明背景

在做頁面開發時，有時為了有更好的顯示效果，我們需要為一些元素設定半透明背景。下面我們來看下怎樣利用CSS3，來設定更好的半透明效果。

操作方法

（01）先寫些測試程式碼，測試HTML很簡單，就是二個div，一個巢狀在另一個裡面，程式碼如圖。

（02）然後為二個div寫上對應的樣式，如圖，都是一些比較基礎的css程式碼，為了顯示透明效果，我們在樣式為p1的div裡，添加了一張背景圖。

（03）先看下還沒新增透明效果的頁面。

（04）要新增透明效果，我們可以為div新增opacity樣式，這是css2的做法，程式碼如圖，添加了一個樣式規則ity，並在p2 div里加上這個樣式名

（05）看下設定了透明效果的頁面。透明效果是實現了，父div的背景圖可以投射出來。但有一個缺陷，就是div上的文字變模糊了，因為也有了透明效果。

（06）為了解決這個缺陷，我們用另一種方法，用css3的方法來實現透明。程式碼如圖，主要是通過rgba來設定p2 div的背景色，然後通過第四個引數來設定透明度：background: rgba(138, 197, 0, 0.6);（需要先去掉原來p2樣式裡的背景色程式碼）

（07）再看下現在的效果。可以看到現在有實現了透明效果，且文字還是清晰，並沒有變模糊。