ఈ కథనం యొక్క ఫలితాలు ఇక్కడ ఉన్నాయి:
మొదలు పెడదాం!
CSSలో చిత్ర రంగును మార్చండి
CSSలో చిత్రం యొక్క రంగును మార్చడానికి, ముందుగా ఫిల్టర్ ప్రాపర్టీ మరియు దాని ఫంక్షన్‌ల గురించి తెలుసుకోండి. మీరు ఈ విధంగా మంచి అవగాహనను పొందుతారు.
CSS లక్షణాన్ని ఫిల్టర్ చేయండి
CSS యొక్క ఇమేజ్ ఫిల్టర్ ప్రాపర్టీ యొక్క దృశ్య ప్రభావాన్ని నియంత్రించడానికి ఉపయోగించబడుతుంది. విజువల్ ఎఫెక్ట్స్:
- బ్లర్
- ప్రకాశం
- రంగు సర్దుబాటు
- చుక్క-నీడ
- అస్పష్టత
ఫిల్టర్ ప్రాపర్టీ యొక్క సింటాక్స్
ఫిల్టర్ ప్రాపర్టీ యొక్క సింటాక్స్:
వడపోత : బ్లర్ ( ) | చుక్క-నీడ ( ) | అస్పష్టత ( )- బ్లర్(): చిత్రంపై బ్లర్ ప్రభావాన్ని వర్తింపజేయడానికి ఉపయోగిస్తారు.
- డ్రాప్-షాడో(): చిత్రంపై నీడను సృష్టించండి.
- అస్పష్టత(): చిత్రానికి పారదర్శకతను జోడించడానికి ఉపయోగిస్తారు.
ఈ ఫిల్టర్ ప్రాపర్టీని ఉపయోగించి మనం బహుళ ఫిల్టర్‌లను ఉపయోగించవచ్చు. ఈ కథనం చిత్రం యొక్క రంగును ఎలా మార్చాలనే దాని గురించి ఉంది, కాబట్టి దానితో డ్రాప్-షాడో(), మరియు అస్పష్టత() ఫంక్షన్‌లను ఎలా ఉపయోగించాలో ఇక్కడ వివరిస్తాము.
డ్రాప్-షాడో()
drop-shadow() అనేది CSS యొక్క అంతర్నిర్మిత ఫంక్షన్, ఇది ఏదైనా మూలకం లేదా చిత్రానికి నీడను సెట్ చేయడానికి అనుమతిస్తుంది. చిత్రం యొక్క రంగును మార్చడానికి క్రింది పారామితులు డ్రాప్-షాడో() ఫంక్షన్‌లో ఉపయోగించబడతాయి:
- ఆఫ్‌సెట్-x: ఇది క్షితిజ సమాంతర నీడను జోడించడానికి ఉపయోగించబడుతుంది.
- ఆఫ్‌సెట్-వై: దీన్ని ఉపయోగించి షాడోలు నిలువుగా జోడించబడతాయి.
- రంగు: ఈ పరామితితో నీడలు రంగులో ఉంటాయి.
ఈ అంశాలను స్పష్టం చేయడానికి, డ్రాప్-షాడో యొక్క సింటాక్స్‌కు వెళ్దాం:
చుక్క-నీడ ( ఆఫ్‌సెట్-x ఆఫ్‌సెట్-వై రంగు )- ఆఫ్‌సెట్-x మరియు ఆఫ్‌సెట్-y సానుకూలంగా లేదా ప్రతికూలంగా ఉండవచ్చు.
- క్షితిజ సమాంతరంగా, కుడి వైపున ప్రభావాలను జోడించడానికి సానుకూల విలువ ఉపయోగించబడుతుంది మరియు ఎడమ వైపుకు ప్రతికూలంగా ఉంటుంది.
- నిలువుగా, ధనాత్మక విలువ దిగువన ఉంటుంది మరియు ప్రతికూలత ఎగువన ఉంటుంది.
- రంగు స్థానంలో, మీరు చిత్రానికి ఇవ్వాలనుకుంటున్న ఏదైనా రంగును కేటాయించవచ్చు.
అస్పష్టత()
అస్పష్టత() ఒక మూలకం లేదా ఏదైనా చిత్రానికి పారదర్శకతను జోడించడానికి ఉపయోగించబడుతుంది. అస్పష్టత() యొక్క వాక్యనిర్మాణం:
అస్పష్టత ( సంఖ్య ) ;ఇక్కడ ' సంఖ్య ” i s అస్పష్టత స్థాయిని 0.0 నుండి 1.0 మధ్య సెట్ చేయడానికి ఉపయోగిస్తారు. చిత్రాన్ని పూర్తిగా పారదర్శకంగా చేయడానికి, మీరు దానిని 0.0గా సెట్ చేయవచ్చు.
పైన పేర్కొన్న అంశాలను స్పష్టం చేయడానికి, ఉదాహరణకి వెళ్దాం.
CSSలో చిత్రం రంగును ఎలా మార్చాలి?
దిగువ ఉదాహరణలో, మొదట, మేము ట్యాగ్‌ని ఉపయోగించి చిత్రాన్ని జోడిస్తాము:
< img తరగతి = 'చిత్రం' src = 'image.jpg' ప్రతిదీ = '' >
< / శరీరం >
ఫిల్టర్ ప్రాపర్టీని వర్తించే ముందు, ఫలితం ఇలా ఉంది:
చిత్రం యొక్క రంగును మార్చడానికి, CSSకి తరలించి, దానికి ఫిల్టర్ ప్రాపర్టీని వర్తింపజేద్దాం. చిత్రం యొక్క పారదర్శకత కోసం మేము అస్పష్టతను 0.5కి సెట్ చేస్తాము. డ్రాప్-షాడో() ఫంక్షన్‌లో, ఆఫ్‌సెట్-x మరియు ఆఫ్‌సెట్-y విలువ 0 ఎందుకంటే మనం చిత్రం యొక్క రంగును మాత్రమే మార్చాలనుకుంటున్నాము.
.చిత్రం {వడపోత : అస్పష్టత ( 0.5 ) చుక్క-నీడ ( 0 0 గోధుమ రంగు ) ;
}
అమలు తర్వాత తుది ఫలితం ఇక్కడ ఉంది:
చిత్రం రంగు విజయవంతంగా మార్చబడింది.
ముగింపు
చిత్రం యొక్క రంగును సవరించడానికి, రెండు CSS ఫంక్షన్‌లు: అస్పష్టత() మరియు డ్రాప్-షాడో() ఫిల్టర్ ప్రాపర్టీతో ఉపయోగించబడతాయి. అస్పష్టత() చిత్రం యొక్క పారదర్శకతను నిర్దేశిస్తుంది మరియు డ్రాప్-షాడో() చిత్రానికి రంగు మరియు నీడను కేటాయిస్తుంది. CSSని ఉపయోగించి చిత్రం యొక్క రంగును మార్చే పద్ధతిని ఈ వ్రాత-అప్ వివరించింది.