CSS opacity() ఫంక్షన్

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

CSS opacity() ఫిల్టర్ ఫంక్షన్స్ ప్రతి సంఘటనకు పారదర్శకతను అమర్చడానికి ఉపయోగించబడతాయి。

  • 100%（లేదా 1）ప్రభావం లేని
  • 50%（లేదా 0.5）ప్రతి సంఘటనను 50% పారదర్శకం చేస్తుంది
  • 0%（లేదా 0）ప్రతి సంఘటనను పూర్తిగా పారదర్శకం చేస్తుంది

ప్రకటన

ఉదాహరణ 1

చిత్రాలకు వేర్వేరు పారదర్శకతను అమర్చండి:

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

పరీక్షించండి

ఉదాహరణ 2

ఈ విధంగా ఉపయోగించండి: opacity() మరియు backdrop-filter సంబంధిత అనునంది ఉపయోగించండి:

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

పరీక్షించండి

CSS సంకేతం

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

ఎంపికము. పారదర్శకతను సంఖ్యలు లేదా శాతంగా నిర్దేశించండి. 0%（లేదా 0）ప్రతి సంఘటనను పూర్తిగా పారదర్శకం చేస్తుంది。

100%（లేదా 1）ఇది అసలు చిత్రాన్ని (ప్రభావం లేని) సూచిస్తుంది. అప్రమేయంగా 1 ఉంటుంది。

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

సంస్కరణ: CSS Filter Effects Module Level 1

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

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

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

సంబంధిత పేజీ

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

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

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

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

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

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

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

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

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

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