站長資訊網
css中可使用linear-gradient()或radial-gradient()漸變函數配合rgba()來設置不透明度漸變。linear-gradient()和radial-gradient()可設置漸變，而rgba()可控制不透明度。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
在css中，可以使用linear-gradient()或radial-gradient()漸變函數配合rgba()來設置不透明度漸變。
linear-gradient()和radial-gradient()函數可以設置漸變效果：
-
linear-gradient()：創(chuàng)建線性漸變
-
radial-gradient()：創(chuàng)建徑向漸變
rgba() 函數使用紅(R)、綠(G)、藍(B)、透明度(A)的疊加來生成各式各樣的顏色。
代碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圖片透明度漸變實例演示</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">設置線性漸變不透明度效果的圖片</div> <div class="div3">設置徑向漸變不透明度效果的圖片</div> </body> </html>
效果圖：
說明：
為了創(chuàng)建一個線性漸變，你必須至少定義兩種顏色節(jié)點。顏色節(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。語法如下：
background-image:linear-gradient(direction, color-stop1, color-stop2, ...);
示例：
徑向漸變由它的中心定義。
為了創(chuàng)建一個徑向漸變，你也必須至少定義兩種顏色節(jié)點。顏色節(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時，你也可以指定漸變的中心、形狀（圓形或橢圓形）、大小。默認情況下，漸變的中心是 center（表示在中心點），漸變的形狀是 ellipse（表示橢圓形），漸變的大小是 farthest-corner（表示到最遠的角落）。
語法：
background-image:radial-gradient(shape size at position, start-color, ..., last-color);
示例：
（學習視頻分享：css視頻教程）
