CSS中如何做出透明效果呢？

/* 使用rgba()函數(shù) */
.box1 {
background-color: rgba(255, 255, 255, 0.5); /* 前三個(gè)參數(shù)是RGB顏色值，最后一個(gè)參數(shù)是透明度，取值范圍是0到1 */
}
/* 使用opacity屬性 */
.box2 {
opacity: 0.5; /* 取值范圍也是0到1 */
}

以上兩種方式都能夠?qū)崿F(xiàn)透明效果。需要注意的是，它們的區(qū)別在于透明度作用的對(duì)象不同。

使用rgba()函數(shù)可以給任何一個(gè)元素設(shè)置透明度，包括元素的背景色、文字顏色、邊框顏色等。

而使用opacity屬性只對(duì)元素自身產(chǎn)生透明效果，不會(huì)影響到元素內(nèi)的內(nèi)容。

小結(jié)一下：

.box1 {
background-color: rgba(255, 255, 255, 0.5); /* 可以給任何元素設(shè)置透明度 */
}
.box2 {
opacity: 0.5; /* 只影響元素本身 */
}

到這里，你已經(jīng)學(xué)會(huì)了如何在CSS中實(shí)現(xiàn)透明效果。