CSS3中的opacity屬性能夠為元素設置透明度。它可以使元素半透明或者完全不透明。
在CSS中,opacity屬性的值介于0.0(完全透明)和1.0(完全不透明)之間。通常情況下,我們使用小數來設置元素的透明度。
下面是一個應用opacity屬性的例子:
.box { background-color: red; opacity: 0.5; }
在上面的例子中,.box元素的背景顏色為紅色,并且設置了opacity屬性為0.5。這意味著.box元素的透明度被設置為50%。
需要注意的是,透明度不僅影響元素自身,還影響其子元素。如果一個元素的透明度為0.5,那么它內部所有的子元素也會變得半透明。
除了opacity屬性,CSS3還引入了另一個屬性——rgba()。rgba()可以為元素設置帶透明度的顏色。其語法如下:
.box { background-color: rgba(255, 0, 0, 0.5); }
在上面的例子中,.box元素的背景顏色為紅色,并且設置了透明度為0.5。這意味著.box元素的背景色半透明。
總的來說,opacity屬性和rgba()函數是非常有用的。它們可以使我們創建有趣的視覺效果,并增強網頁的交互性。
上一篇css3menu教程
下一篇css3ie11兼容