CSS3 అస్పష్ట గురించి తెలుసుకోండి

మీ నేపథ్యాలు పారదర్శకమవుతాయి

మీరు ముద్రణ రూపకల్పనలో సులభంగా చేయగలిగే విషయాల్లో ఒకటి కాని వెబ్లో కాదు చిత్రం లేదా రంగు నేపథ్యంలో ఓవర్లే టెక్స్ట్, మరియు ఆ చిత్రం యొక్క పారదర్శకతని మార్చడం తద్వారా నేపథ్యంలో టెక్స్ట్ ఫేడ్ అవుతుంది. కానీ వారు మీ మూలకాలను అస్పష్టత మార్చడానికి అనుమతించే CSS3 లో ఒక ఆస్తి ఉంది మరియు అవి బయటకు వాడిపోవు: అస్పష్టత.

అస్పష్ట ఆస్తిని ఎలా ఉపయోగించాలి

అస్పష్టత ఆస్తి 0.0 నుంచి 1.0 వరకు పారదర్శకత మొత్తం విలువను తీసుకుంటుంది.

0.0 100% పారదర్శకంగా ఉంటుంది-ఆ మూలకం క్రింద ఏదైనా పూర్తిగా చూపిస్తుంది. 1.0 100% అపారదర్శక-మూలకం క్రింద ఏమీ చూపించదు.

కాబట్టి 50% పారదర్శకంగా ఒక మూలకం సెట్, మీరు వ్రాస్తారు:

అస్పష్టత: 0.5;

చర్యలో అస్పష్టత యొక్క కొన్ని ఉదాహరణలు చూడండి

పాత బ్రౌజర్లలో పరీక్షించడానికి ఖచ్చితంగా ఉండండి

ఏ IE 6 లేదా 7 మద్దతు CSS3 అస్పష్టత ఆస్తి. కానీ మీరు అదృష్టం కాదు. బదులుగా, IE ఒక Microsoft- మాత్రమే ఆస్తి ఆల్ఫా ఫిల్టర్కు మద్దతు ఇస్తుంది. IE లో ఆల్ఫా ఫిల్టర్లు 0 (పూర్తిగా పారదర్శకంగా) నుండి 100 (పూర్తిగా అపారదర్శక) వరకు విలువలను అంగీకరించాలి. కాబట్టి, IE లో మీ పారదర్శకత పొందడానికి, మీరు 100 ద్వారా మీ అస్పష్టతను గుణించాలి మరియు మీ శైలులకు ఒక ఆల్ఫా ఫిల్టర్ను జోడించాలి:

వడపోత: ఆల్ఫా (అస్పష్టత = 50);

చర్యలో ఆల్ఫా ఫిల్టర్ చూడండి (IE మాత్రమే)

మరియు బ్రౌజర్ పూర్వపదాలను ఉపయోగించండి

మొజిల్లా మరియు వెబ్కిట్ బ్రౌజర్స్ యొక్క పాత సంస్కరణలు కూడా మద్దతివ్వటానికి -moz- మరియు -webkit- పూర్వపదాలను ఉపయోగించాలి:

-వెబ్కిట్-అస్పష్టత: 0.5;
-మోజ్-అస్పష్టత: 0.5;
అస్పష్టత: 0.5;

ఎల్లప్పుడూ ముందు బ్రౌజర్ పూర్వపదాలను, మరియు చెల్లుబాటు అయ్యే CSS3 ఆస్తి ఉంచండి.

పాత మొజిల్లా మరియు వెబ్కిట్ బ్రౌజర్లలో బ్రౌజర్ పూర్వపదాలను పరీక్షించండి.

మీరు చిత్రాలను పారదర్శకంగా చేసుకోవచ్చు

చిత్రం లో అస్పష్టత సెట్ మరియు అది నేపథ్య లోకి మారతాయి ఉంటుంది. నేపథ్య చిత్రాలకు ఇది నిజంగా ఉపయోగకరంగా ఉంటుంది.

మరియు మీరు ఒక యాంకర్ ట్యాగ్ లో జోడిస్తే మీరు చిత్రం యొక్క అస్పష్టత మార్చడం ద్వారా హోవర్ ప్రభావాలు సృష్టించవచ్చు.

ఒక: హోవర్ img {
వడపోత: ఆల్ఫా (అస్పష్టత = 50)
వడపోత: progid: DXImageTransform.Microsoft.Alpha (అస్పష్టత = 50)
-మోజ్-అస్పష్టత: 0.5;
-వెబ్కిట్-అస్పష్టత: 0.5;
అస్పష్టత: 0.5;
}

ఈ HTML ని ప్రభావితం చేస్తుంది:

పైన ఉన్న శైలులను మరియు HTML చర్యను పరీక్షించండి.

మీ చిత్రాలపై వచనాన్ని ఉంచండి

అస్పష్టతతో, మీరు ఒక చిత్రంపై వచనాన్ని ఉంచవచ్చు మరియు ఆ చోట టెక్స్ట్ ఎక్కడ ఉద్భవించవచ్చనేది కనిపిస్తుంది.

మొత్తం చిత్రాన్ని వాడిపోవు గా, మీరు కేవలం చిత్రం వాడిపోవు ఎందుకంటే ఈ టెక్నిక్, కొద్దిగా గమ్మత్తైన ఉంది. మరియు మీరు టెక్స్ట్ బాక్స్ ఫేడ్ కాదు, ఎందుకంటే టెక్స్ట్ కూడా అక్కడ వాడిపోవు ఉంటుంది.

1. మొదటి మీరు ఒక CONTAINER DIV ను సృష్టించి, లోపల మీ చిత్రాన్ని ఉంచండి:

   
   

2. ఖాళీ DIV తో చిత్రాన్ని అనుసరించండి -ఈ మీరు పారదర్శకంగా చేస్తాం.

   
   
   

3. మీరు మీ HTML లో చేర్చిన చివరి విషయం DIV లో మీ టెక్స్ట్తో ఉంటుంది:

   
   
   
   ఇది నా కుక్క శాస్టా. అతను అందమైన కాదు!

4. మీరు చిత్రం స్థానానికి టెక్స్ట్ ఉంచడానికి, CSS స్థానాలు తో శైలి. నేను ఎడమ వైపున నా వచనాన్ని ఉంచాను, కాని మీరు ఎడమవైపున రెండు ఎడమకు మార్చడం ద్వారా దాన్ని కుడివైపు పెట్టవచ్చు: 0; కుడివైపుకు లక్షణాలు: 0; .

   # ఇమేజ్ {
   స్థానం: సంబంధిత;
   వెడల్పు: 170px;
   ఎత్తు: 128px;
   margin: 0;
   }
   #text {
   స్థానం: absolute;
   top: 0;
   ఎడమ: 0;
   వెడల్పు: 60px;
   ఎత్తు: 118px;
   నేపధ్యం: #fff;
   padding: 5 px;
   }
   #text {
   ఫిల్టర్: ఆల్ఫా (అస్పష్ట = 70);
   వడపోత: progid: DXImageTransform.Microsoft.Alpha (అస్పష్టత = 70);
   -మోజ్-అస్పష్టత: 0.70;
   అస్పష్టత: 0.7;
   }
   # వర్డ్స్ {
   స్థానం: absolute;
   top: 0;
   ఎడమ: 0;
   వెడల్పు: 60px;
   ఎత్తు: 118px;
   నేపధ్యం: పారదర్శక;
   padding: 5 px;
   }

అది ఎలా కనిపిస్తుందో చూడండి