CSS రంగులు

ఇన్స్టాన్స్

స్వయంగా ప్రయత్నించండి

hsl(0, 100%, 90%);

దిగువ ఉదాహరణలు వివిధ HSL రంగులను నిర్వచిస్తాయి:

ఇన్స్టాన్స్

#p1 {background-color: hsl(120, 100%, 50%);}  /* హరిత రంగు */
#p2 {background-color: hsl(120, 100%, 75%);}  /* తెలుపు హరిత రంగు */
#p3 {background-color: hsl(120, 100%, 25%);}  /* కంకర హరిత రంగు */
#p4 {background-color: hsl(120, 60%, 70%);}   /* తెలుపు హరిత రంగు */

స్వయంగా ప్రయత్నించండి

HSLA రంగు

HSLA రంగు విలువలు అల్పా చానల్ కలిగిన HSL రంగు విలువల విస్తరణ - ఇది రంగు అనునాతనతను నిర్వచిస్తుంది.

HSLA రంగు విలువలు క్రింది పారామీటర్లతో నిర్వచించబడతాయి: hsla(hue, saturation, lightness, alpha)，అలాగే alpha పారామీటర్ అనునాతనతను నిర్వచిస్తుంది. alpha పారామీటర్ 0.0 (పూర్తి స్పష్టత) మరియు 1.0 (పూర్తి అనునాతనత) మధ్య సంఖ్యలు ఉండాలి.

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

దిగువ ఉదాహరణలు వివిధ HSLA రంగులను నిర్వచిస్తాయి:

ఇన్స్టాన్స్

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* అనునాతనతతో కలిగిన హరిత రంగు */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* అనునాతనతతో కలిగిన తెలుపు హరిత రంగు */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* అనునాతనతతో కలిగిన కంకర హరిత రంగు */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* అనునాతనతతో కలిగిన తెలుపు హరిత రంగు */

స్వయంగా ప్రయత్నించండి

అనునాతనత

CSS opacity అనునాతన అనునాతనత అనునాతనంగా మొత్తం అంశం అనునాతనతను అనునాతనంగా సెట్ చేస్తుంది (బ్యాక్‌గ్రౌండ్ రంగు మరియు పాఠం అనునాతన/స్పష్టంగా ఉంటాయి).

opacity అనునాతన విలువ అనునాతనంగా 0.0 (పూర్తి స్పష్టత) మరియు 1.0 (పూర్తి అనునాతనత) మధ్య సంఖ్యలు ఉండాలి.

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

请注意，上面的文本也将是透明/不透明的！

下面的例子显示了带有不透明度的不同元素：

ఇన్స్టాన్స్

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* అనుప్రయోగించబడిన ఎరుపు */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* అనుప్రయోగించబడిన హరిత */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* అనుప్రయోగించబడిన నీలి */

స్వయంగా ప్రయత్నించండి