CSS నేపథ్య పారదర్శకత. CSS తో పారదర్శక నేపథ్యం లేదా టెక్స్ట్

CSS3 వెబ్ డిజైనర్లు రావడంతో అనేక విధాలుగా పని సులభంగా మరియు మరింత తార్కిక మారింది: అన్ని తరువాత, మీరు ఇప్పుడు నిజంగా తేలికగా ఏ వస్తువు, తక్కువ తరచుగా జావాస్క్రిప్ట్ నైజం అనుకూలీకరించవచ్చు. మీరు నేపథ్యం పారదర్శకత సర్దుబాటు అవసరం అనుకోండి - CSS వెంటనే అనేక ఎంపికలు అందిస్తుంది.

నేపధ్యం లక్షణాల యొక్క సెట్ ద్వారా నిర్వచించబడిన (నేపథ్య చిత్రం, నేపథ్య స్థానం , background- పరిమాణం, background-repeat నేపథ్య-జోడింపుతో, నేపథ్య సంతతి, నేపథ్య క్లిప్, నేపథ్య రంగు), విడిగా కేటాయించిన వీటిలో ప్రతి లేదా లక్షణం కింద కలిపి నేపథ్య. మాకు వివరాలు వాటిని ప్రతి పరిశీలించడానికి లెట్.

కేటాయించండి నేపథ్య రంగు

CSS, నేపథ్య రంగు ఒక హెక్స్ కోడ్, రంగు పేరు లేదా RGB ప్రవేశం ఉపయోగించి: అనేక విధాలుగా అమర్చవచ్చు. CSS3 లో బదులుగా RGBA తో RGB-రికార్డింగ్ ఎంపికను ఉపయోగించడం సాధ్యపడింది.

నేపథ్య రంగు: # FFDAB9 హెక్స్ రంగు కోడ్ జాలక తరువాత ఆస్తి నమోదయింది. ఈ ఎంట్రీ లో పాత్రలు ఒకే జతల ఉంటే, కోడ్ సాధారణంగా కొంచెం కట్ ఉంది: # ccff00 # cf0 వ్రాయవచ్చు:

శరీర {background-color: # cf0 ;}.

పేరు కూడా చాలా అన్యదేశ రంగుల్లో, ఉంది. ఉదాహరణకు, ప్రామాణిక ఎరుపు మరియు మీరు NavajoWhite (#FFDEAD) లేదా Honeydew2 (# E0EEE0) ఉపయోగించవచ్చు తెలుపు అదనంగా:

శరీర {background-color: ఊదా; }.

వయసువారికి RGB లేదా RGBA ఎంట్రీ మీరు మాత్రమే రంగు కూడా CSS నేపథ్యం పారదర్శకత తెలుపుటకు అనుమతించును, కానీ పద్ధతిగా మాత్రమే 9 కంటే పాత IE వెర్షన్ లో పనిచేస్తుంది. ఇతర బ్రౌజర్లు పారదర్శకత తో సాధారణ వెర్షన్ గుర్తించాయి. W3C ప్రమాణాలు ప్రకారం అది ఇప్పటికీ బదులుగా మరింత సాధారణ RGB యొక్క rgba ఉపయోగించడానికి ప్రాధాన్యత.

RGBA నేపథ్యంలో గత విలువ 0 (పారదర్శక) నుండి 1 (అపారదర్శక) కు అస్పష్టత అమర్చుతుంది.

కొన్ని అసాధారణ విలువలు ఉన్నాయి. నేపథ్య రంగు HSL మరియు HSLA ఉపయోగించి అమర్చవచ్చు. రెండూ CSS3 చేర్చబడ్డాయి, మరియు అందువలన ఉంటాయి IE వెర్షన్ 9 లేదా ఎక్కువ మద్దతు లేదు. , నింపు - (రంగు చక్రం విలువ, డిగ్రీల ఇవ్వబడింది రంగులో) (సంతృప్త - ఒక శాతం 0 నుండి 100 వరకు రంగు యొక్క తీవ్రత), తేలిక (తేలిక - ప్రకాశం, అదేవిధంగా సాచురేట్ పారామితి కొలుస్తారు హ్యూయే: ఐచ్ఛికాలు మాత్రమే వేరే ఫార్మాట్లో, RGB లేదా RGBA సమానంగా ఉంటాయి ).

నేపథ్య చిత్రం కేటాయించండి

పారదర్శక నేపథ్యం అత్యంత క్రాస్ బ్రౌజర్ వెర్షన్ - ఈ చిత్రం ఉపయోగించడం. CSS3 లో, మీరు మరింత చిత్రాలను సెట్ చేయవచ్చు, ఈ ఒక కామా ద్వారా జరుగుతుంది. ఉదాహరణకు:

{Background-బాడీ ఇమేజ్: url (bg1.png) url (bg2.png)}.

IE8 కూడా మద్దతు ఈ విధంగా. లేఅవుట్ లో ఉపయోగించే రబ్బరు నేపథ్యంలో అనేక చిత్రాలు. ముఖ్యంగా, వినియోగదారులు కేవలం ఒక చిత్రాన్ని అప్లోడ్ చేయవచ్చు, ఏ చిత్రం ఉపయోగించడానికి మరియు CSS లో నేపథ్య రంగు సెట్ మరిచిపోకండి.

నేపథ్య స్థానం కేటాయించండి

మీరు నేపథ్య యూనిట్ సెట్ చిత్రం ఉపయోగిస్తే, CSS మీరు తెరపై ఎక్కడైనా చిత్రం ఉంచడం అనుమతిస్తుంది. అప్రమేయంగా, చిత్రం ఎగువ ఎడమ మూలలో ఉన్న. లక్షణం శబ్ద సూచనలను గాని (పైన, క్రింద, కుడి, ఎడమ), ఒక సంఖ్యా (ఆసక్తి, పిక్సెళ్ళు మరియు ఇతర యూనిట్లు) పడుతుంది. ఈ సందర్భంలో, మీరు అడ్డం మరియు నిలువు రెండు విలువలు, పేర్కొనాలి:

శరీర {background-స్థానం: కుడి సెంటర్ ;} - ఈ ఉదాహరణలో, నమూనా పేజీ, ఒకే చిత్రం దూరం యొక్క ఎగువన మరియు దిగువన కుడి వైపు ఉన్న చేయబడుతుంది.

కేటాయించండి background- పరిమాణం

కొన్నిసార్లు అది CSS నేపథ్య చాచు లేదా దాని పరిమాణం తగ్గించడానికి అవసరం. ఇది చేయటానికి, గుణం background- పరిమాణం, మరియు నేపథ్య పిక్సెళ్ళు లేదా శాతాలు అమర్చవచ్చు యొక్క పరిమాణం, మరియు ఏ ఇతర యూనిట్లు ఉపయోగించండి.

ఈ గుణం, కొన్ని సమస్యలు ఉన్నాయి: బ్రౌజర్ పూర్వపదాలను యొక్క ప్రారంభ సంస్కరణలు నేపథ్యాన్ని సరైన ప్రదర్శన ఉపయోగించవచ్చు కోసం. వాస్తవానికి, ప్రస్తుత వర్షన్ పూర్తిగా ఈ గుణం మద్దతు మరియు నిర్దిష్ట లక్షణాలు అవసరం అదృశ్యమైన.

background-అటాచ్మెంట్ కేటాయించండి

ఈ గుణం స్క్రోలింగ్ నేపథ్య చిత్రాలు ప్రవర్తన నిర్దేశిస్తుంది. కాబట్టి, ఇది 3 విలువలు (వారసత్వంగా, ఈ కథనంలో చర్చించిన గుణాలను అన్ని కోసం మొత్తం కలపకుండా) పట్టవచ్చు:

• - స్థిర నేపథ్యంలో చిత్రాన్ని చేస్తుంది;
• స్క్రోల్ - అంశాలు మిగిలిన నేపథ్య స్క్రోల్స్;
• స్థానిక - స్క్రోలింగ్ కంటెంట్ కలిగి ఉంటే నేపథ్యంలో చిత్రం చుట్టబడి ఉంటుంది. ఫ్రేమ్ యొక్క కంటెంట్లను దాటి నేపధ్యం పరిష్కరించబడింది.

వినియోగానికి ఉదాహరణ:

శరీర {background-అటాచ్మెంట్ స్థిర}.

ప్రస్తుతం, ఫైర్ఫాక్స్ గత ఆస్తి (స్థానిక) మద్దతు లేదు.

నేపథ్య సంతతి కేటాయించండి

ఈ గుణం స్థానాలు మూలకం బాధ్యత. ప్రారంభ బ్రౌజర్లు పూర్వపదాలను వినియోగం కావలసి ఉంది. ఆస్తి అనే మూడు పారామితులు ఉంది:

• ఖాతాలోకి ఫ్రేమ్ యొక్క మందం తీసుకుంటూనే padding-బాక్స్, అంచు నమూనా సంబంధిత ఉంచుతారు;
• సరిహద్దు రేఖ ఉండాలనే మునుపటి భిన్నంగా సరిహద్దు పెట్టె లక్షణాలు పూర్తిగా లేదా పాక్షికంగా నమూనా పోలిక;
• కంటెంట్ బాక్స్ స్థానాలు చిత్రం దాని కంటెంట్ pryavyazyvaya.

మీరు బహుళ విలువలు తెలిపితే, అప్పుడు బ్రౌజర్లు వారి స్వంత విధంగా స్పందించలేదు: ఫైర్ఫాక్స్ మరియు Opera మొదటి ఎంపికను గ్రహించగలరు.

background-repeat కేటాయించండి

ఒక నియమం వలె, నేపథ్య చిత్రం పేర్కొనకపోతే, అది అడ్డంగా, నిలువుగా పునరావృతం చెయ్యాలి. ఈ కోసం మరియు లక్షణ background-repeat ఉపయోగిస్తారు. అందువలన, బ్లాక్ నేపథ్య, ఇటువంటి ఒక లక్షణం కలిగి CSS పలు కారకాలు ఒకటి కలిగి:

• నో పునరుక్తి - చిత్రం ఒక సింగిల్ వెర్షన్ లో ఒక పేజీలో కనిపిస్తుంది;
• పునరావృతం - నేపథ్య x మరియు y పునరావృతమవుతుంది;
• పునః x - మాత్రమే అడ్డంగా;
• పునః y - మాత్రమే నిలువుగా;
• స్పేస్ - నేపథ్య పునరావృతమవుతుంది, కానీ స్థలం చిత్రాల మధ్య పూరించడానికి అసాధ్యం ఉంటే ఖాళీగా కనబడి;
• రౌండ్ - ఇది మొత్తం చిత్రాలు మొత్తం ప్రాంతం పూరించడానికి లేదు ఉంటే చిత్రం, స్కేల్ ఉంది.

లక్షణాల ఉదాహరణ:

శరీర {background-repeat: నో పునరావృతం} - ఇలాంటి background-repeat: పునః y.

కామాలతో వేరు పారామితులు, జాబితాలో CSS3 లో బహుళ చిత్రాలు విలువలు తెలియచేయవచ్చు.

నేపథ్య క్లిప్ కేటాయించండి

ఈ గుణం (చుక్కల ఫ్రేమ్లను విషయంలో, ఉదా:) బౌండరీలు క్రింద నేపథ్య ప్రవర్తన నిర్వచిస్తుంది:

• పాడింగ్ పెట్టె - నేపథ్య బ్లాక్ అంతర్భాగంలో ప్రదర్శించబడుతుంది;
• సరిహద్దు పెట్టె - చిత్రం పరిధిలో వస్తుంది;
• కంటెంట్ బాక్స్ - నేపథ్య చిత్రాన్ని మాత్రమే కంటెంట్ లోపల కనిపిస్తుంది.

వినియోగానికి ఉదాహరణ:

శరీర {background-క్లిప్: content- బాక్స్;}.

Chrom మరియు Safari -webkit- ఉపసర్గ అవసరం.

అస్పష్ట లక్షణాలను మరియు వడపోత

CSS ఆస్తి అన్ని బ్రౌజర్లలో పనిచేస్తుంది - అస్పష్టత లక్షణం మీరు నేపథ్యం పారదర్శకత సెట్ అనుమతిస్తుంది. విలువ 0.0 నుంచి 1.0 కలుపుకొని పరిధిలో సెట్. ఈ సందర్భంలో, మీరు CSS నేపథ్యం పారదర్శకత సెట్ చేయవచ్చు బదులుగా 0.3 సంఖ్య పూర్ణాంకం విలువ .3 రాయడానికి తగినంత ఉంది:

.బ్లాక్ {background-image: url ( img.png); అస్పష్టత: .3;}.

నేపథ్య అస్పష్టత సెట్, CSS వడపోత గుణం ఉపయోగించడానికి కూడా తొమ్మిదవ వెర్షన్ క్రింద IE కోసం అనుకూలంగా ఉంటుంది:

.బ్లాక్ {background-image: url ( img.png); వడపోత: ఆల్ఫా (అస్పష్టత = 30)}.

స్పష్టమైన మాత్రమే నేపథ్య కాగానే అస్పష్టత ఉపయోగించి, కానీ కూడా యూనిట్ లోపల అన్ని అంశాలు: ఈ సందర్భంలో, అస్పష్టత విలువ అస్పష్టత RGBA వారసత్వ ద్వారా వివిధ పారదర్శకత సెట్టింగులను కేటాయించండి మధ్య 0 మరియు 100 గమనిక సెట్.

CIS బ్రౌజర్లు మరియు అన్ని ఇతర దేశాల కోసం మీ వాడుక గణాంకాలు ఎల్లప్పుడూ మానిటర్. అన్ని DTP అతిపెద్ద సమస్య - IE యొక్క పాత వెర్షన్లు, వారు మీరు పూర్తి స్థాయిలో CSS3 ఉపయోగించడానికి అనుమతించము. లేఅవుట్ లో మీ బ్రౌజర్ ఏ CSS ఆస్తి మద్దతు లేదో తనిఖీ ప్రత్యేక సేవలు ఉపయోగించడానికి మర్చిపోతే లేదు. మీరు బ్రౌజర్ యొక్క పాత వెర్షన్లు ఇన్స్టాల్ పోతే, ఆన్లైన్ బహుళ బ్రౌజర్లలో సైట్ పని తనిఖీ చేస్తుంది ఒక సేవ కనుగొనేందుకు.