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