స్టైల్ ఫిల్టర్ అట్రిబ్యూట్

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

ఫిల్టర్ అట్రిబ్యూట్లను చిత్రానికి విషువాలుకలిగించండి (ఉదా మేలు చేయబడిన ఫ్లాటర్ మరియు సార్వత్రికత మేలు చేయబడిన ఫ్లాటర్).

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

సిఎస్ఎస్ మాన్యువల్ఫిల్టర్ అట్రిబ్యూట్

ఉదాహరణ

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

document.getElementById("myImg").style.filter = "గ్రేస్కేల్ (100%)";

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

సింటాక్స్

ఫిల్టర్ అట్రిబ్యూట్ తిరిగి చేస్తుంది:

ఆబ్జెక్ట్.style.filter

ఫిల్టర్ అట్రిబ్యూట్ సెట్ చేయండి:

ఆబ్జెక్ట్.style.filter = "none | బ్లర్ () | బ్రైట్నెస్ () | కాంట్రాస్ట్ () | డ్రాప్ షాడ్వూ నుండి | గ్రేస్కేల్ () | హ్యూ రోటేట్ () | ఇన్వర్ట్ () | ఆపకాసిటీ () | సెట్ అప్ () | సెపియా ()"

ఫిల్టర్ ఫంక్షన్

వివరణం:శతల విలువలు (ఉదా 75%) ఫిల్టర్లను పరిగణించబడతాయి అనేక డెసిమల్ విలువలు (అనేక 0.75).

ఫిల్టర్ వివరణ
నాన్ ఎక్కువ ప్రభావం లేదు.
బ్లర్ (పిక్సెల్స్)

చిత్రానికి మేలు చేయబడిన ఫ్లాటర్ ప్రభావాన్ని వాడండి. ఎక్కువ విలువలు మరింత మేలు చేయబడిన ఫ్లాటర్ ప్రభావాన్ని కలిగిస్తాయి.

如果未规定值，则使用 0。
brightness(%)

调整图像的亮度。

0% 将使图像完全变黑。

100% (1) 是默认值，表示原始图像。

超过 100% 的值将提供更亮的结果。
contrast(%)

调整图像的对比度。

0% 将使图像完全变黑。

100% (1) 是默认值，表示原始图像。

超过 100% 的值将提供对比度较低的结果。
drop-shadow(h-shadow v-shadow blur spread color)

对图像应用投影效果。

可能的值：

h-shadow - 必需。规定水平阴影的像素值。负值将阴影放置在图像的左侧。

v-shadow - 必需。规定垂直阴影的像素值。负值将阴影置于图像上方。

blur ఎంపికలేదు. మూడవ విలువను పిక్సెల్స్ విలువలో నిర్వహించండి. శాడోకు మృదువైన ప్రభావాన్ని జోడించండి. ఎక్కువ విలువలు ఎక్కువ మృదువైన ప్రభావాన్ని సృష్టిస్తాయి (శాడో పెద్దగా మరియు మెరుపుగా ఉంటుంది). పొందికలేదు విలువలు అనుమతించబడదు. ఎందుకంటే ఎంపికలేదు విలువను ఉపయోగిస్తారు (శాడో అంచులు తెలియని ఉంటాయి).

spread ఎంపికలేదు. నాలుగవ విలువను పిక్సెల్స్ విలువలో నిర్వహించండి. పొందికలేదు పరిమాణం అధికంగా శాడోను విస్తరిస్తుంది మరియు పెద్దగా చేస్తుంది, పొందికలేదు పరిమాణం సాధారణంగా ఉంటుంది (శాడో పరిమాణం అదే ఉంటుంది).

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

colorఎంపికలేదు. శాడోలకు రంగును జోడించండి. ఎందుకంటే ఎంపికలేదు, బ్రౌన్ సాధారణంగా ఉంటుంది.

సూచన:ఈ filter box-shadow అంశానికి సమానం.
grayscale(%)

చిత్రాన్ని ముదురు చేయండి.

0% (0) మూలం చిత్రాన్ని సూచిస్తుంది.

100% చిత్రాన్ని పూర్తిగా ముదురు చేస్తుంది (కాలింగ్ చిత్రాలకు వాడతారు).

వివరణం:不允许负值。
hue-rotate(deg)

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

0deg మూలం చిత్రాన్ని సూచిస్తుంది.

వివరణం:గరిష్టంగా 360 డిగ్రీలు.
invert(%)

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

0% (0) మూలం చిత్రాన్ని సూచిస్తుంది.

100% చిత్రాన్ని పూర్తిగా విలోమం చేస్తుంది.

వివరణం:不允许负值。
opacity(%)

చిత్రంలోని అప్యాయం స్థాయిని అమర్చండి. అప్యాయం స్థాయి అప్యాయం స్థాయిని వివరిస్తుంది, అనేకందుకు:

0% పూర్తి పారదర్శకతను సూచిస్తుంది.

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

వివరణం:不允许负值。

సూచన:ఈ filter ఆపాయంతో opacity అంశం అన్నికి సమానం.
saturate(%)

చిత్రంలోని సాటరేషన్ను సర్దుబాటు చేయండి.

0% (0) చిత్రాన్ని అపూరితంగా చేస్తుంది.

100% మూలం చిత్రాన్ని సూచిస్తుంది.

100% కంటే ఎక్కువ విలువలు అధిక పూరిత ఫలితాలను అందిస్తాయి.

వివరణం:不允许负值。
sepia(%)

చిత్రాన్ని పసుపు రంగులో మార్చండి.

0% (0) మూలం చిత్రాన్ని సూచిస్తుంది.

100% పూర్తి పసుపు రంగులో చిత్రాన్ని ప్రదర్శిస్తుంది.

వివరణం:不允许负值。

技术细节

CSS 版本： CSS3

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0