在 HTML 中,我們可以使用 CSS 來(lái)設(shè)置盒子的透明度,通過(guò)改變透明度可以實(shí)現(xiàn)一些特殊的效果。
要讓一個(gè)盒子變得透明,我們可以使用 CSS 屬性opacity
,該屬性取值范圍為 0 到 1,其中 0 表示完全透明,1 表示完全不透明。
下面是一個(gè)div
盒子變成半透明的例子:
div { background-color: yellow; opacity: 0.5; }
這里的background-color
屬性設(shè)置了盒子的背景色為黃色,opacity
屬性設(shè)置了盒子的透明度為 0.5,即半透明。
除了使用opacity
屬性,我們還可以使用rgba()
函數(shù)來(lái)設(shè)置盒子的透明度,這種方法可以精確地指定透明度的程度。
下面是一個(gè)使用rgba()
函數(shù)來(lái)設(shè)置盒子透明度的例子:
div { background-color: rgba(255, 255, 0, 0.5); }
這里的rgba()
函數(shù)的第四個(gè)參數(shù)是透明度,取值范圍也是 0 到 1,這里我們將透明度設(shè)置為 0.5,即半透明。
注意:對(duì)于使用opacity
屬性設(shè)置的透明度,其子元素也都會(huì)受到相同的透明度影響,而使用rgba()
函數(shù)設(shè)置的透明度只會(huì)影響當(dāng)前元素,不會(huì)影響其子元素。