站長(zhǎng)資訊網(wǎng)
css中，可利用“background-image”屬性和“l(fā)inear-gradient()”函數(shù)來(lái)設(shè)置背景向兩個(gè)方向漸變，語(yǔ)法為“元素{background-image:linear-gradient(方向,顏色1,顏色2,顏色3}”。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css怎樣設(shè)置背景向兩個(gè)方向漸變
在css中，可以利用background-image屬性和linear-gradient()函數(shù)來(lái)實(shí)現(xiàn)想兩個(gè)方向漸變。
background-image 屬性為元素設(shè)置背景圖像。
linear-gradient() 函數(shù)用于創(chuàng)建一個(gè)表示兩種或多種顏色線性漸變的圖片。
創(chuàng)建一個(gè)線性漸變，需要指定兩種顏色，還可以實(shí)現(xiàn)不同方向（指定為一個(gè)角度）的漸變效果，如果不指定方向，默認(rèn)從上到下漸變。
設(shè)置背景向上漸變?yōu)榧t色，向下漸變?yōu)樗{(lán)色，示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> div{ height: 200px; width:300px; background-image: linear-gradient(red,transparent,blue); } </style> </head> <body> <p>從頭部開始的線性漸變，從紅色開始，轉(zhuǎn)為透明，再到藍(lán)色:</p> <div></div> </body> </html>
輸出結(jié)果：
（學(xué)習(xí)視頻分享：css視頻教程）
