CSS ఫిల్టర్ అట్రిబ్యూట్

  • పూర్వ పేజీ empty-cells
  • తరువాతి పేజీ flex

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

filter అనే అంశం మెటాడ్యుల్స్ (అన్నింటికీ <img>) యొక్క విద్యుత్ దృశ్యాలను (ఉదాహరణకు బ్లర్ మరియు సార్వత్రికత సామర్థ్యం) నిర్వచిస్తుంది.

మరింత చూడండి:

CSS శిక్షణ పద్ధతి:CSS చిత్రం

HTML DOM పరిశీలన పుస్తకం:filter అనే అంశం

ఉదాహరణ

అన్ని చిత్రాలను కాలర్లేసి చేయండి (100% గ్రేయ్):

img {
  filter: grayscale(100%);
}

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

హిందూస్తానీ సలహా:పేజీ క్రిందన మరిన్ని TIY ఉదాహరణలను కనుగొనండి.

CSS సంకేతం

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

హిందూస్తానీ సలహా:如需使用多个滤镜，请用空格分隔每个滤镜（参见页面下方的更多实例）。

技术细节

默认值： none
继承： 否
动画制作： 支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.filter="grayscale(100%)"

滤镜函数

ప్రకటనలు:使用百分比值（例如 75％）的滤镜，也接受该值是十进制（例如 0.75）。

滤镜 描述
none అప్రమేయం. ప్రభావం నిర్ధారించండి.
blur(px)

చిత్రానికి ముసాగు ప్రభావాన్ని అనువర్తించండి. పెద్ద విలువలు మరింత ముసాగును సృష్టిస్తాయి.

నిర్దేశించబడిన విలువ ఉన్నట్లయితే, 0 ఉపయోగించబడుతుంది.
brightness(%)

చిత్రం యొక్క ప్రకాశవంతతను మార్చండి.

  • 0% చిత్రాన్ని పూర్తిగా నలుపు చేస్తుంది.
  • అప్రమేయ విలువ అందుబాటులో ఉంది 100%, అది ప్రారంభ చిత్రాన్ని ప్రతినిధీకరిస్తుంది.
  • 100% కంటే ఎక్కువ విలువలు మరింత ప్రకాశవంతమైన ఫలితాలను అందిస్తాయి.
contrast(%)

చిత్రం యొక్క కాంట్రాస్ట్ మార్చండి.

  • 0% చిత్రాన్ని పూర్తిగా నలుపు చేస్తుంది.
  • అప్రమేయ విలువ అందుబాటులో ఉంది 100%, అది ప్రారంభ చిత్రాన్ని ప్రతినిధీకరిస్తుంది.
  • 100% కంటే ఎక్కువ విలువలు మరింత వ్యత్యాసాలను అందిస్తాయి.
drop-shadow(h-shadow v-shadow blur spread color)

చిత్రానికి ముసాగు ప్రభావాన్ని అనువర్తించండి.

సాధ్యమైన విలువలు:

  • h-shadow - అవసరమైన. పెరపెరికి ముసాగు పిక్సెల్ విలువను నిర్దేశించండి. నెగ్యటివ్ విలువలు ముసాగును చిత్రం ఎడమ వైపు చేరుస్తాయి.
  • v-shadow - అవసరమైన. పెరపెరికి ముసాగు పిక్సెల్ విలువను నిర్దేశించండి. నెగ్యటివ్ విలువలు ముసాగును చిత్రం పైకి చేరుస్తాయి.

blur - ఆప్షనల్. ఇది మూడవ విలువ, పొడవుని పొలియుటు ఉంటుంది. ముసాగుకు ముసాగు ప్రభావాన్ని జోడించండి. విలువ పెరిగితే ముసాగు పెరుగుతుంది మరియు మెరుగుపడుతుంది (ముసాగు పెద్దదిగా మరియు మెరుగుపడుతుంది). నెగ్యటివ్ విలువలు అనుమతించబడదు. నిర్ధారించబడలేకపోతే, 0 విలువ ఉపయోగించబడుతుంది (ముసాగు అంతరాయం కనిపించదు).

spread - ఆప్షనల్. ఇది నాలుగవ విలువ, పొడవుని పొలియుటు ఉంటుంది. పోజిటివ్ విలువలు ముసాగును విస్తరించి పెంచతాయి, నెగ్యటివ్ విలువలు ముసాగును చిన్నదిగా చేస్తాయి. నిర్ధారించబడలేకపోతే, 0 విలువ ఉపయోగించబడుతుంది (ముసాగు ఎలాంటి పరిమాణంతో ఉంటుంది).

ప్రకటనలు:Chrome, Safari మరియు Opera, బహుశా ఇతర బ్రౌజర్లు నాలుగవ పొడవును మద్దతు చేయవు; జోడించినట్లయితే, దానిని ప్రదర్శించబడదు.

color - ఆప్షనల్. ముసాగుకు రంగును జోడించండి. ఇది నిర్ధారించబడలేకపోతే, రంగు బ్రౌజర్ ప్రకారం (సాధారణంగా నలుపు) ఉంటుంది.

ఈ ఉదాహరణ ఎరుపు రంగు ముసాగును సృష్టించింది, అది హోరిజంటల్ మరియు వెర్టికల్ దిశల్లో 8px ఉంది, 10px ముసాగు ప్రభావం ఉంది:

filter: drop-shadow(8px 8px 10px red);

హిందూస్తానీ సలహా:这个滤镜类似 box-shadow 属性。
grayscale(%)

చిత్రాన్ని గ్రే స్కేల్ చేయండి.

  • 0% (0) అప్రమేయం మరియు మూల చిత్రాన్ని ప్రతిబింబిస్తుంది.
  • 100％ చిత్రాన్ని పూర్తిగా గ్రే చేస్తుంది (కాలర్ ల్యాన్ చిత్రాలకు ఉపయోగిస్తారు).

ప్రకటనలు:మానిటర్ విలువలు అనుమతించబడదు.
hue-rotate(deg)

చిత్రంపై హ్యూ రోటేషన్ అమర్చండి. ఈ విలువ హ్యూ స్కూల్ యొక్క డిగ్రీలను నిర్వహిస్తుంది. అప్రమేయం 0deg, మూల చిత్రాన్ని ప్రతిబింబిస్తుంది.

ప్రకటనలు:గరిష్టంగా 360deg.
invert(%)

చిత్రంలోని నమూనాలను రివర్స్ చేయండి.

  • 0% (0) అప్రమేయం మరియు మూల చిత్రాన్ని ప్రతిబింబిస్తుంది.
  • 100％ చిత్రంలోని సమస్త నమూనాలను పూర్తిగా రివర్స్ చేస్తుంది.

ప్రకటనలు:మానిటర్ విలువలు అనుమతించబడదు.
opacity(%)

చిత్రం యొక్క అనుపాక్షికతని అమర్చండి. opacity-level అనుపాక్షికతని అంటే అంటే పారదర్శకతని సూచిస్తుంది, అనగా:

  • 0% పూర్తిగా పారదర్శకం ఉంటుంది.
  • 100% (1) అప్రమేయం మరియు మూల చిత్రాన్ని (అనుపాక్షికత) ప్రతిబింబిస్తుంది.

ప్రకటనలు:మానిటర్ విలువలు అనుమతించబడదు.

హిందూస్తానీ సలహా:ఈ ఫిల్టర్ ఆపాక్షికతా అంశానికి సమానం ఉంటుంది.
saturate(%)

చిత్రం యొక్క సాట్యతని అమర్చండి.

  • 0% (0) చిత్రాన్ని పూర్తిగా ఉపసంచితం చేస్తుంది.
  • 100% అప్రమేయం మరియు మూల చిత్రాన్ని ప్రతిబింబిస్తుంది.
  • విలువలు 100% కంటే మరింత ఉపసంచిత ఫలితాలను అందిస్తాయి.

ప్రకటనలు:మానిటర్ విలువలు అనుమతించబడదు.
sepia(%)

చిత్రాన్ని బ్రౌన్ చేయండి.

  • 0% (0) అప్రమేయం మరియు మూల చిత్రాన్ని ప్రతిబింబిస్తుంది.
  • 100％ చిత్రాన్ని పూర్తిగా బ్రౌన్ చేస్తుంది.

ప్రకటనలు:మానిటర్ విలువలు అనుమతించబడదు.
url()

url() ఫంక్షన్ సిగ్నల్ ఎక్స్మ్ల్ ఫైల్ యొక్క స్థానాన్ని అంగీకరిస్తుంది మరియు ప్రత్యేక ఫిల్టర్ అంతర్జాతక ప్రతిపాదనను చేరుస్తుంది. ఉదాహరణకు:

filter: url(svg-url#element-id);
initial ఈ అంశాన్ని దిగువ ప్రతిపాదనకు స్థానం కల్పించండి. చూడండి: initial。
inherit తన పైభాగం అంతర్జాతక ప్రతిపాదనను స్వీకరించండి. చూడండి: inherit。

మరిన్ని ఉదాహరణలు

మెరుపు ఉదాహరణ

చిత్రానికి మెరుపు ప్రభావాన్ని జోడించండి:

img {
  filter: blur(5px);
}

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

మెరుపు ఉదాహరణ 2

మెరుపు బ్యాక్‌గ్రౌండ్ చిత్రాన్ని ఆప్లై చేయండి:

img.background {
  filter: blur(35px);
}

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

బ్రైట్నెస్ ఉదాహరణ

చిత్రం యొక్క బ్రైట్నెస్ మార్చండి:

img {
  filter: brightness(200%);
}

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

కాంట్రాస్ట్ ఉదాహరణ

చిత్రం యొక్క కాంట్రాస్ట్ మార్చండి:

img {
  filter: contrast(200%);
}

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

షేడ్ ప్రభావం ఉదాహరణ

చిత్రానికి షేడ్ ప్రభావాన్ని ఆప్లై చేయండి:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

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

గ్రేస్కేల్ ఉదాహరణ

చిత్రాన్ని గ్రేస్కేల్ చేయండి:

img {
  filter: grayscale(50%);
}

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

రంగురంగుల పరివర్తన ఉదాహరణ

చిత్రంపై రంగురంగుల పరివర్తన చేయండి:

img {
  filter: hue-rotate(90deg);
}

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

విలోమ ఉదాహరణ

చిత్రంలోని ప్రతిమాత్రలను విలోమం చేయండి:

img {
  filter: invert(100%);
}

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

పారదర్శకత ఉదాహరణ

చిత్రం యొక్క పారదర్శకతను నిర్ణయించండి:

img {
  filter: opacity(30%);
}

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

సారసత్వ ఉదాహరణ

చిత్రం యొక్క సారసత్వాన్ని సర్దుబాటు చేయండి:

img {
  filter: saturate(800%);
}

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

బ్రౌనీస్ ఉదాహరణ

బ్రౌనీస్ చిత్రాన్ని మార్చండి:

img {
  filter: sepia(100%);
}

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

బహుళ ఫిల్టర్లను ఉపయోగించడం

బహుళ ఫిల్టర్లను ఉపయోగించడానికి, ప్రతి ఫిల్టర్ మధ్య అంతరాన్ని అంతరాంతరంగా ఉంచండి. ప్రత్యేకంగా, sepia() తర్వాత grayscale() ఉపయోగించడం పూర్తి ముదురు చిత్రాన్ని ఉత్పత్తి చేస్తుంది:

img {
  filter: contrast(200%) brightness(150%);
}

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

అన్ని ఫిల్టర్లు

అన్ని ఫిల్టర్ ఫంక్షన్లను ప్రదర్శించండి:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

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

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

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

ముందుగా ప్రత్యేకించబడిన ప్రత్యేకించబడిన నంబర్లు -webkit- తో ముందుగా ఉపయోగించబడిన వెర్షన్లను సూచిస్తాయి.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

ప్రకటనలు:కాలంలో ఉన్న ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ యొక్క పాత వెర్షన్లు (4.0 నుండి 8.0) కొనసాగించబడిన అనియంత్రిత "filter" అంశాన్ని మద్దతు ఇస్తాయి. IE8 మరియు తక్కువ వెర్షన్లకు మద్దతు అవసరమైనప్పుడు, ఇది పారదర్శకత కోసం ముఖ్యంగా ఉపయోగిస్తారు.

  • పూర్వ పేజీ empty-cells
  • తరువాతి పేజీ flex