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