在做頁面開發時,有時爲了有更好的顯示效果,我們需要爲一些元素設置半透明背景。下面我們來看下怎樣利用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)再看下現在的效果。可以看到現在有實現了透明效果,且文字還是清晰,並沒有變模糊。