背景：
在做畢業(yè)設(shè)計(jì)的時(shí)候用到了一張背景圖，但是顏色與我想要的顏色不符，就從網(wǎng)上找了一下解決方法，在不改變?cè)瓐D的基礎(chǔ)上進(jìn)行變色，變?yōu)樽约合胍?a target="_blank" >顏色，經(jīng)過(guò)一番查找之后，找到了解決方法，有的用的是css的filter而我用的這個(gè)是簡(jiǎn)單一點(diǎn)用的是css的一個(gè)函數(shù) ---linear-gradient()函數(shù)
語(yǔ)法：
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：用角度值指定漸變的方向（或角度）。
color-stop：用于指定漸變的起止顏色。一個(gè)顏色的時(shí)候就是整體都是這個(gè)顏色，兩個(gè)顏色時(shí)一個(gè)為起始顏色，一個(gè)為終止色，多個(gè)顏色，就是多色漸
例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥(niǎo)教程(runoob.com)</title> <style> #grad1 { height: 200px; background-color: red; /* 不支持線性的時(shí)候顯示 */
background-image: linear-gradient(to bottom right, red , yellow, rgba(0,255,0,1));
/* 這里的to right表示線性從左到右，從紅色漸變變成黃色在漸變?yōu)榫G色且透明度為不透明 且在這個(gè)基礎(chǔ)上可以加上自己的背景圖片只要設(shè)置url路徑即可*/
} </style> </head> <body> <div id="grad1"></div> <p><strong>注意：</strong> Internet Explorer 8 及之前的版本不支持漸變。</p> </body> </html>
效果圖：
聯(lián)系客服
