CSS 渐变
CSS గ్రేడియంట్లు మీరు నిర్దేశించిన రంగుల మధ్య సమానమైన పరివర్తనను చూపించగలరు.
CSS నుండి రెండు రకాల గ్రేడియంట్లను నిర్వచించింది:
- లైనర్ గ్రేడియంట్(- క్రిందకు/పైకి/ఎడమకు/కుడికి/దిక్కుకు మారుతుంది)
- రేడియల్ గ్రేడియంట్(- కేంద్రం ద్వారా నిర్వచించబడింది)
CSS లైనర్ గ్రేడియంట్
లైనర్ గ్రేడియంట్ సృష్టించడానికి, మీరు కనీసం రెండు కలర్ పాయింట్లను నిర్వచించవలసి ఉంటుంది. కలర్ పాయింట్లు మీరు సమానమైన పరివర్తనను చూపించడానికి ఉపయోగించే రంగులు. మీరు కూడా ప్రారంభం మరియు దిశ (లేదా కోణం) మరియు గ్రేడియంట్ ప్రభావాన్ని నిర్వచించవచ్చు.
语法
background-image: linear-gradient(దిశ, color-stop1, color-stop2, ...);
లైనర్ గ్రేడియంట్ - పై నుండి క్రిందకు (డిఫాల్ట్)
పై నుండి మొదలుకొని వీక్షణానుష్ఠానం చేసే లైనర్ గ్రేడియంట్ ఉదాహరణ చూపిస్తుంది. ఇది ఎరుపు నుండి పసుపుకు మారుతుంది:
ఇన్‌స్టాన్స్
#grad {
background-image: linear-gradient(red, yellow);
}
线性渐变 - 从左到右
下面的例子展示了从左开始的线性渐变。它从红色开始，过渡到黄色：
ఇన్‌స్టాన్స్
#grad {
background-image: linear-gradient(to right, red , yellow);
}
线性渐变 - 对角线
您可以通过指定水平和垂直起始位置来实现对角渐变。
下面的例子展示了从左上角开始（到右下角）的线性渐变。它从红色开始，过渡到黄色：
ఇన్‌స్టాన్స్
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
使用角度
如果希望对渐变角度做更多的控制，您可以定义一个角度，来取代预定义的方向（向下、向上、向右、向左、向右下等等）。值 0deg 等于向上（to top）。值 90deg 等于向右（to right）。值 180deg 等于向下（to bottom）。
语法
background-image: linear-gradient(angle, color-stop1, color-stop2);
这个角度指定水平线和渐变线之间的角度。
下面的例子展示了如何在线性渐变上使用角度：
ఇన్‌స్టాన్స్
#grad {
background-image: linear-gradient(-90deg, red, yellow);
}
使用多个色标
下面的例子展示了带有多个色标的线性渐变（从上到下）：
ఇన్‌స్టాన్స్
#grad {
background-image: linear-gradient(red, yellow, green);
}
下面的例子展示了如何使用彩虹色和一些文本创建线性渐变（从左到右）：
ఇన్‌స్టాన్స్
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
పారదర్శకతను ఉపయోగించడం
CSS గ్రేడియంట్లు పారదర్శకతను కూడా మద్దతు చేస్తాయి, ఇది గ్రేడియంట్ ప్రభావాన్ని సృష్టించడానికి కూడా ఉపయోగించబడవచ్చు.
పారదర్శకతను జోడించడానికి, మేము rgba() ఫంక్షన్ ఉపయోగిస్తాము రంగు మేరకు నిర్వచించడానికి. rgba() ఫంక్షన్ లోని చివరి పరామితి 0 నుండి 1 వరకు విలువను కలిగి ఉంటుంది, ఇది రంగు పారదర్శకతను నిర్వచిస్తుంది: 0 పూర్తి పారదర్శకతను సూచిస్తుంది, 1 పూర్తి రంగును సూచిస్తుంది (పారదర్శకతలేని).
下面的例子展示了从左开始的线性渐变。它开始完全透明，然后过渡为全色红色：
ఇన్‌స్టాన్స్
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
重复线性渐变
repeating-linear-gradient() పునరావృతమైన లీనియర్ గ్రేడెంట్ ఉపయోగించడానికి విధంగా ఫంక్షన్ ఉపయోగించండి:
ఇన్‌స్టాన్స్
పునరావృతమైన లీనియర్ గ్రేడెంట్ ఉపయోగించండి:
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
