在設置背景透明度時，新手用到opacity是不是會碰到連內容也跟著透明的情況呢？這里介紹兩種方法。
在對元素進行透明度的設置時，經常用到的有opacity與background-color:rgba()。
那么，它們到底有啥區別呢？
在使用opacity時，處了對背景生效之外，應用它的元素的內容也會繼承它。就是說它的子元素也會繼承它。
下面，對提示框進行一個透明度的設置。
首先使用了opacity屬性
仔細看，紅色的字也跟著變淺了，它繼承了上一級的元素屬性。
在使用了background-color:rgba(0,0,0,0.5)之后
這里僅僅是背景透明了，框內的文字并沒有繼承該屬性。
所以說，rgba()和opacity都能實現透明效果，但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度，而rgba()只作用于元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）
上一篇： html5中的date-*屬性
下一篇： 如何用css3做出漸變的效果
關鍵詞:
