CSS中有一個常用的屬性叫做透明度,它可以控制元素的不透明度,這個屬性非常有用,特別是在設計半透明效果和層疊元素時。
透明度屬性是opacity
,它的取值范圍從0到1,表示從完全透明到完全不透明。例如,opacity:0.5
表示元素不透明度為50%。
.box{ opacity:0.7; }
當一個元素設置了透明度,它的子元素也會繼承透明度。如果想要子元素不受透明度影響,則可以使用rgba
或者background-color:rgba()
,其中a
表示alpha值,表示透明度,默認為1,范圍也是0到1。
.box{ background-color: rgba(255,255,255,0.7); }
透明度對于制造一些半透明效果和實現層疊元素是非常實用的。例如可以使用透明度制造卡片式效果,使用層疊元素可以實現燈箱效果等等。