ఈ వ్యాసం మీకు అస్పష్టతను అర్థం చేసుకోవడానికి సహాయపడే భావనను పరిచయం చేస్తుంది మరియు ఈ పరామితిని ఎలా నియంత్రించాలో మీకు తెలియజేస్తుంది. ఈ వ్యాసంలో క్రింది గమనికలు కవర్ చేయబడతాయి,
- CSS లో అస్పష్టత
- అస్పష్టత క్యాస్కేడింగ్ అంశాలతో వారసత్వంగా వచ్చింది
- క్యాస్కేడింగ్ ఎలిమెంట్స్ కోసం RGBA లక్షణ సెట్టింగ్
- హోవర్ ప్రభావంపై అస్పష్టత మార్పులు
ఒక మూలకం యొక్క నేపథ్య అస్పష్టత HTML రూపకల్పనలో ఉపయోగకరమైన లక్షణ అమరిక. అస్పష్టత స్థాయిని (పారదర్శకత యొక్క విలోమం) సెట్ చేయడం ద్వారా, ఒక డిజైనర్ CSS అస్పష్టత ఆస్తి ద్వారా మూలకం యొక్క దృశ్యమానతను నియంత్రించవచ్చు. మూలకాల క్యాస్కేడింగ్ ఉన్నప్పుడు ఇది సాధారణంగా నేపథ్య అమరికగా ఉపయోగించబడుతుంది, ఒకదానిపై ఒకటి ఉంచబడుతుంది.
ఈ లక్షణం ఉపయోగించబడే అత్యంత సాధారణ దృశ్యం ఇది:
- వచన మూలకం వెనుక పాక్షికంగా పారదర్శక నేపథ్య చిత్రం ఉంచబడుతుంది.
- నేపథ్య చిత్రం విపరీతంగా కనిపిస్తుంది, కాబట్టి ఇది ముందు వచనాన్ని ఆధిపత్యం చేయదు.
- వినియోగదారు స్పష్టంగా చూడటానికి ఎంచుకున్నప్పుడు చిత్రం పూర్తి దృష్టిలోకి రావచ్చు.
మీరు చదవాలనుకోవచ్చు CSS అస్పష్టత గురించి తెలుసుకోవడానికి ముందు.
సమగ్ర CSS ట్యుటోరియల్ కోసం, సందర్శించండి బిగినర్స్ కోసం ఎడురేకా CSS ట్యుటోరియల్ . HTML వెబ్ డిజైన్‌ను పెంచడానికి CSS ఉపయోగించాల్సిన మార్గంలో మీరు అద్భుతమైన హెడ్-అప్ పొందుతారు.
CSS లో అస్పష్టతపై ఈ కథనంతో కదులుతోంది
CSS లో అస్పష్టత
CSS లో, అస్పష్టత 0.0 - 1.0 మధ్య సంఖ్యా విలువగా సెట్ చేయబడింది. సున్నాకి దగ్గరగా ఉన్న విలువలు మరింత పారదర్శకతను సూచిస్తాయి, చిత్రం దృశ్యమానతలో చాలా తేలికగా ఉంటుంది. 50% పారదర్శకతతో చిత్రం చూపబడిన ఉదాహరణతో ప్రారంభిద్దాం. దిగువ ఉదాహరణ 1 చూడండి.
ఉదాహరణ 1: నేపథ్య చిత్రం సెమీకి సెట్ చేయబడింది పారదర్శకత
img {అస్పష్టత: 0.5 వడపోత: ఆల్ఫా (అస్పష్టత = 50) / * IE8 మరియు అంతకు ముందు * /} 
ఉదాహరణ 1: అవుట్పుట్
అసలు చిత్రం (100% అస్పష్టత)
పూర్ణాంక పైథాన్ యొక్క రివర్స్ అంకెలు
50% అస్పష్టత సెట్టింగ్‌తో చిత్రం
పై ఉదాహరణలో, కేవలం ఒక మూలకం ఉంది - ఒక చిత్రం. ఇతర అంశాలను టెక్స్ట్, డివి ఎలిమెంట్స్ వంటి అస్పష్టత పరామితితో కూడా సెట్ చేయవచ్చు.
CSS లో అస్పష్టతపై ఈ కథనంతో కదులుతోంది
అస్పష్టత క్యాస్కేడింగ్ అంశాలతో వారసత్వంగా వచ్చింది
మూలకాలు ఒకదానిపై ఒకటి పేర్చబడినప్పుడు, నేపథ్య మూలకం అస్పష్టత అమరికను కలిగి ఉంటే, అది అన్ని పిల్లల మూలకాల ద్వారా వారసత్వంగా వస్తుంది. ఇది డిఫాల్ట్ సెట్టింగ్ . అంటే ఒక చిత్రంపై టెక్స్ట్ బాక్స్ ఉంచబడి, చిత్రం 0.5 అస్పష్టత అమరికను కలిగి ఉంటే, అప్పుడు చిత్రం మరియు టెక్స్ట్ ఎలిమెంట్ రెండూ పాక్షికంగా మాత్రమే కనిపిస్తాయి.
మా తదుపరి ఉదాహరణలో TOM & JERRY చిత్రంపై ఉంచిన పిల్లల వచన మూలకం యొక్క ఉదాహరణను తీసుకుందాం. ఉదాహరణ 2 లో డిఫాల్ట్ అస్పష్టత ప్రభావాన్ని మనం చూడవచ్చు.
.కంటైనర్ {స్థానం: సాపేక్ష టెక్స్ట్-అలైన్: సెంటర్ అస్పష్టత: 0.5}. కేంద్రీకృత {స్థానం: సంపూర్ణ టాప్: 50% ఎడమ: 50% పరివర్తన: అనువాదం (-50%, -50%) రంగు: నీలం ఫాంట్-పరిమాణం: 40 పిక్స్} } టామ్ & జెర్రీఉదాహరణ 2: మాతృ చిత్రం నుండి టెక్స్ట్ అస్పష్టతను పొందుతుంది
CSS లో అస్పష్టతపై ఈ కథనంతో కదులుతోంది
క్యాస్కేడింగ్ ఎలిమెంట్స్ కోసం RGBA లక్షణ సెట్టింగ్
కాస్కేడింగ్ అంశాలతో అస్పష్టతను నియంత్రించడానికి మరొక మార్గం ఉంది. పిల్లల మూలకం దాని నేపథ్య మూలకం యొక్క అస్పష్టతతో ప్రభావితం కాకుండా ఉండాలని మీరు కోరుకుంటే, మీరు ఉపయోగించవచ్చు RGBA లక్షణ సెట్టింగ్ .
జావాలో క్రమబద్ధీకరణ ప్రోగ్రామ్‌ను విలీనం చేయండి
ఉదాహరణ 3: RGBA సెట్టింగ్‌ను ఉపయోగించడం
నేపథ్యం: rgba (76, 175, 80, 1.0) / * చిత్రానికి అస్పష్టత సెట్టింగ్ లేదు * / / * 100% అస్పష్టత కలిగిన టెక్స్ట్ కోసం ఆకుపచ్చ నేపథ్యం * / / * బ్లూ కలర్ టెక్స్ట్ 100% అస్పష్టత కలిగి ఉంటుంది * /
నేపథ్యం: rgba (76, 175, 80, 0.4) / * చిత్రానికి అస్పష్టత అమరిక లేదు * / / * 40% అస్పష్టత కలిగిన వచనానికి ఆకుపచ్చ నేపథ్యం * / / * నీలిరంగు వచనం ఇప్పటికీ 100% అస్పష్టతతో కనిపిస్తుంది * /
RGB రంగు కోడ్ తరువాత, లక్షణం ‘a’ ని సూచిస్తుంది ఆల్ఫా . ది ఆల్ఫా పరామితి 0.0 (పూర్తిగా పారదర్శకంగా) మరియు 1.0 (పూర్తిగా అపారదర్శక) మధ్య సంఖ్య.
CSS లో అస్పష్టతపై ఈ కథనంతో కదులుతోంది
హోవర్ ప్రభావంపై అస్పష్టత మార్పులు
కొన్ని సందర్భాల్లో, వెబ్ డిజైనర్లు వినియోగదారు మూలకంపై దృష్టి కేంద్రీకరించారా లేదా అనేదానిపై ఆధారపడి అస్పష్టత మారాలని కోరుకుంటారు. ఉదాహరణకు, ఒక చిత్రం అప్రమేయంగా 50% అస్పష్టతకు సెట్ చేయబడిందని చెప్పండి. ఏదేమైనా, వినియోగదారు చిత్రంపై మౌస్ను ఉంచినప్పుడు, చిత్రం 100% అస్పష్టతతో పూర్తి దృష్టిలోకి రావాలని మేము కోరుకుంటున్నాము.
ఉదాహరణ 4 ఇది ఎలా జరిగిందో చూపిస్తుంది.
గమనించవలసిన సాధారణ అంశాలు:
- CSS లో ‘దృశ్యమానత’ లక్షణాన్ని ఉపయోగించడానికి అస్పష్టత సెట్టింగ్ ప్రత్యామ్నాయం. ఏదేమైనా, అస్పష్టత అమరికను ఉపయోగించడం వలన సున్నా నుండి పూర్తి వరకు పారదర్శకత యొక్క వివిధ స్థాయిలను సెట్ చేయడం సులభం అవుతుంది.
- వివిధ బ్రౌజర్‌లలో జాగ్రత్తగా పరీక్షించిన తరువాత అస్పష్టత స్థాయిని నిర్ణయించాలి. అస్పష్టత తక్కువ విలువలకు సెట్ చేయబడినప్పుడు, కొన్నిసార్లు టెక్స్ట్ లేదా ఇమేజ్ పూర్తిగా కనిపించకుండా లేదా చదవలేనిదిగా మారవచ్చు.
- అస్పష్టతను ఉపయోగించడం వెనుక ఉన్న ఆలోచన ఏమిటంటే కొన్ని అంశాలపై పదునైన దృష్టి పెట్టడం, ఇతర నేపథ్య అంశాలు వినియోగదారు దృష్టిని మరల్చవు. కాబట్టి ఇటువంటి నేపథ్య అంశాలు తక్కువ అస్పష్టతతో సెట్ చేయబడతాయి.
- ఇంటర్నెట్ ఎక్స్‌ప్లోరర్‌లో, IE8 మరియు పాత సంస్కరణల కోసం, అస్పష్టత ఆస్తి 1 నుండి 100 వరకు ఉండే ‘ఫిల్టర్’ సెట్టింగ్. అన్ని ఇతర బ్రౌజర్‌లలో, ఇది 0 నుండి 1 వరకు ఉంటుంది.
CSS లో అస్పష్టతపై ఈ వ్యాసం చివరకి ఇది మనలను తీసుకువస్తుంది.
aws స్నాప్‌షాట్ నుండి ఉదాహరణను ప్రారంభించండి
వెబ్-అభివృద్ధి గురించి మరింత తెలుసుకోవడానికి మీకు ఆసక్తి ఉంటే, చూడండి ఎడురేకా చేత. వెబ్ డెవలప్‌మెంట్ సర్టిఫికేషన్ శిక్షణ HTML5, CSS3, ట్విట్టర్ బూట్‌స్ట్రాప్ 3, j క్వెరీ మరియు గూగుల్ API లను ఉపయోగించి ఆకట్టుకునే వెబ్‌సైట్‌లను ఎలా సృష్టించాలో తెలుసుకోవడానికి మరియు అమెజాన్ సింపుల్ స్టోరేజ్ సర్వీస్ (S3) కు ఎలా అమలు చేయాలో తెలుసుకోవడానికి మీకు సహాయపడుతుంది.
మీకు ఇంకా ఆసక్తి ఉంటే, మీకు ఏమైనా ప్రశ్న ఉంటే, మీరు దానిని “CSS లో అస్పష్టత” బ్లాగ్ యొక్క వ్యాఖ్య విభాగంలో పోస్ట్ చేయవచ్చు మరియు మేము వీలైనంత త్వరగా మిమ్మల్ని సంప్రదిస్తాము.