CSS grayscale() ఫంక్షన్

నిర్వచనం మరియు ఉపయోగం

CSS యొక్క grayscale() ఫిల్టర్ ఫంక్షన్స్ చిత్రాన్ని గ్రేస్కేల్ చేస్తాయి.

  • 100% (లేదా 1) చిత్రాన్ని పూర్తిగా గ్రేస్కేల్ చేస్తుంది
  • 0% (లేదా 0) కొత్త ఫంక్షన్ లేదు

ఉదాహరణ

ఉదాహరణ 1

చిత్రాలకు వేర్వేరు గ్రేస్కేల్ విలువలను అమర్చండి:

#img1 {
  filter: grayscale(1);
}
#img2 {
  filter: grayscale(60%);
}
#img3 {
  filter: grayscale(0.4);
}

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

ఉదాహరణ 2

చేసిన ఉదాహరణ 2 grayscale() మరియు backdrop-filter అంశాలను కలిపి ఉపయోగించండి:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: grayscale(50%);
  backdrop-filter: grayscale(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

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

CSS సంకేతాలు

grayscale(amount)
విలువ వివరణ
amount

ఎంపిక. గ్రేస్కేల్ విలువను నిర్దేశించండి, అది సంఖ్యలు లేదా శతలక్షణాలు కావచ్చు.

100% (లేదా 1) అంశాన్ని పూర్తిగా గ్రేస్కేల్ చేస్తుంది.

0% (లేదా 0) అప్రమేయ చిత్రాన్ని (కొత్త ఫంక్షన్ లేదు) సూచిస్తుంది.

డిఫాల్ట్ విలువ 1.

సాంకేతిక వివరాలు

వెర్షన్: CSS Filter Effects Module Level 1

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ ఫంక్షన్ ను పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ వెర్షన్ ను సూచిస్తాయి。

చ్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఓపెరా
18 12 35 6 15

సంబంధిత పేజీలు

సూచనలు:CSS ఫిల్టర్ అట్రిబ్యూట్

సూచనలు:CSS blur() ఫంక్షన్

సూచనలు:CSS brightness() ఫంక్షన్

సూచనలు:CSS contrast() ఫంక్షన్

సూచనలు:CSS drop-shadow() ఫంక్షన్

సూచనలు:CSS hue-rotate() ఫంక్షన్

సూచనలు:CSS invert() ఫంక్షన్

సూచనలు:CSS opacity() ఫంక్షన్

సూచనలు:CSS saturate() ఫంక్షన్

సూచనలు:CSS sepia() ఫంక్షన్