站長(zhǎng)資訊網(wǎng)
css中可使用linear-gradient()或radial-gradient()漸變函數(shù)配合rgba()來設(shè)置不透明度漸變。linear-gradient()和radial-gradient()可設(shè)置漸變，而rgba()可控制不透明度。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中，可以使用linear-gradient()或radial-gradient()漸變函數(shù)配合rgba()來設(shè)置不透明度漸變。
linear-gradient()和radial-gradient()函數(shù)可以設(shè)置漸變效果：
-
linear-gradient()：創(chuàng)建線性漸變
-
radial-gradient()：創(chuàng)建徑向漸變
rgba() 函數(shù)使用紅(R)、綠(G)、藍(lán)(B)、透明度(A)的疊加來生成各式各樣的顏色。
代碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圖片透明度漸變實(shí)例演示</title> <style> div{ box-sizing: border-box; width: 400px; height: 320px; font-size: 22px; padding-top: 100px; overflow: hidden; background: no-repeat center top / 100% 100%; } .div1 { background-image: url(img/1.jpg) } .div2 { background-image: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url(img/1.jpg) } .div3 { background-image: radial-gradient(rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 1)), url(img/1.jpg) } </style> <div class="div1">正常圖片</div><br> <div class="div2">設(shè)置線性漸變不透明度效果的圖片</div> <div class="div3">設(shè)置徑向漸變不透明度效果的圖片</div> </body> </html>
效果圖：
說明：
為了創(chuàng)建一個(gè)線性漸變，你必須至少定義兩種顏色節(jié)點(diǎn)。顏色節(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時(shí)，你也可以設(shè)置一個(gè)起點(diǎn)和一個(gè)方向（或一個(gè)角度）。語(yǔ)法如下：
background-image:linear-gradient(direction, color-stop1, color-stop2, ...);
示例：
徑向漸變由它的中心定義。
為了創(chuàng)建一個(gè)徑向漸變，你也必須至少定義兩種顏色節(jié)點(diǎn)。顏色節(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時(shí)，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認(rèn)情況下，漸變的中心是 center（表示在中心點(diǎn)），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠(yuǎn)的角落）。
語(yǔ)法：
background-image:radial-gradient(shape size at position, start-color, ..., last-color);
示例：
（學(xué)習(xí)視頻分享：css視頻教程）
