利用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）再看下現在的效果。可以看到現在有實現了透明效果，且文字還是清晰，並沒有變模糊。