黑色到透明漸變是一種在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的效果。下面我們將介紹如何使用 CSS 來實(shí)現(xiàn)這個(gè)效果。

background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

在上面的代碼中，linear-gradient是 CSS3 中用來實(shí)現(xiàn)漸變的屬性。其中，to bottom表示漸變的方向是從上到下，也可以設(shè)置為to top、to left、to right或者任意角度；rgba(0, 0, 0, 1)表示漸變的起始顏色，即黑色；rgba(0, 0, 0, 0)表示漸變的結(jié)束顏色，即透明度為 0 的黑色。

需要注意的是，不同瀏覽器對于漸變的支持可能不一樣，因此建議同時(shí)添加以上代碼的兼容性寫法：

background: -moz-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Firefox */
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Safari 和 Chrome */
background: -o-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Opera */
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* 標(biāo)準(zhǔn)的語法 */

使用以上代碼，我們就可以輕松地實(shí)現(xiàn)黑色到透明漸變的效果了。