CSS Hannergrond Transparenz. Duerchsichteg Hannergrond oder Text mat CSS

Mat deer vun CSS3 Web Designer Aarbecht an vill Manéiere ass méi einfach a méi logesch: no all, kënnt Dir elo wierklech flexibel all Objet asëtzen, manner oft ze Javascript Reklamme. Loosst d'soen, dass Dir der Transparenz vum Hannergrond ze ajustéieren brauchen - CSS bitt direkt e puer Optiounen.

Hannergrond vun enger Formatioun vun Attributer definéiert (Hannergrond-Bild, Hannergrond-Positioun , Hannergrond-Gréisst, Hannergrond-widderhuelen, Hannergrond-Unhang, Hannergrond-Urspronk, Hannergrond-Clip, Hannergrond-Faarw), all vun deem getrennt zougewisen gin kann oder ënnert der Spezialfäegkeeten kombinéiert Hannergrond. Loosst eis all vun hinnen am Detail ënnersicht.

Spezialfäegkeeten Hannergrond-Faarw

An CSS, d'Hannergrondfaarf kann an e puer Manéieren ageriicht ginn: ee mengen dass Code, Faarf Numm oder RGB-Element benotzt. An CSS3 gouf et méiglech amplaz RGB-Opnahmen Optioun mat RGBA konzentréiert.

Hannergrond-Faarw:: # FFDAB9 mengen dass Faarf Code ass am Besëtz no der strooss opgeholl. Wann de Personnagen an wëll déi selwecht Puer sinn, ass de Code normalerweis e bësse Géigewier: # ccff00 als # cf0 geschriwwe ginn:

Kierper {Hannergrond-Faarw: # cf0 ;}.

Den Numm ass, och am meeschte exotesch Faarwen. Zum Beispill, an nieft der Norm rout a wäiss Dir NavajoWhite (#FFDEAD) oder Honeydew2 (# E0EEE0) benotzen kann:

Kierper {Hannergrond-Faarw: mauve; }.

De Fonds Optioun ass RGB oder RGBA Element erlaabt Iech net nëmmen Faarf ze uginn, awer och d'Transparenz vun der CSS Hannergrond, mee d'Method funktionéiert nëmmen am IE Versiounen al wéi 9. Aner Browser erkenne normal Versioun mat Transparenz. No der W3C Standarden ass et preferable nach amplaz vun der méi gewinnt RGB ze benotzen RGBA.

Déi lescht Wäert vun RGBA Hannergrond a baut d'Opazitéit aus 0 (transparent) bis 1 (Rack).

Et ginn e puer ongewéinlech Wäerter. Hannergrond Faarf kann mat der HSL an HSLA ginn ageriicht. Souwuel sech ze CSS3 derbäi, an duerfir sinn net vun IE Versioun 9 oder méi ënnerstëtzt. Däer sëlwecht RGB oder RGBA, just an engem anere Format: H (Hallefschiet - Wäert op d'Faarf Rad, an Grad ginn ass), letz (Samschten - Faarf Intensitéit als Prozentsaz, vun 0 bis 100), Liichtegkeet (Liichtegkeet - Hellegkeet, gemooss Zerfall Parameter letz ).

Spezialfäegkeeten Hannergrond-Bild

De stäerkste Kräiz-Browser Versioun vun der transparent Hannergrond - dat ass de Gebrauch vum Bild. An CSS3, kënnt dir nach méi Biller virbereet, dëst duerch e verbrauchen gemaach. Beispill:

{Hannergrond-Kierper Bild: URL (bg1.png), URL (bg2.png)}.

Dës Aart a Weis och IE8 vun ënnerstëtzen. Puer Biller am Hannergrond vun der Gummistécker am Layout benotzt. Wichteg, vergiesst nët all Bild ze benotzen an d'Hannergrondfaarf an CSS virbereet, wéi Benotzer kann einfach en Bild eropluet.

Spezialfäegkeeten Hannergrond-Positioun

Wann Dir d'Bild benotzen Hannergrond Eenheet ze virbereet, CSS erlaabt Dir der Bild iwwerall op den Ecran ze Positioun. Par défaut, ass d'Bild vun der ieweschter lénks Corner etabléiert. Spezialfäegkeeten hëlt entweder richteg Uweisungen (uewen, ënnen, lénks, riets), e z'identifizéieren (Interessi, Pixel an aner Eenheeten). An dësem Fall, muss dir zwee Wäerter, horizontal a vertikal uginn:

Kierper {Hannergrond-Positioun: Recht Zentrum ;} - an dësem Beispill gëtt d'Muster op der rietser Ofwiersäit vun der Säit, uewen an ënnen vum Bild Distanz zu der selwechter etabléiert ginn.

Spezialfäegkeeten Hannergrond-Gréisst

Heiansdo ass et néideg der CSS Hannergrond oder reduzéieren seng Gréisst ze zéien. Maachen dëst, benotzen d'Spezialfäegkeeten Hannergrond-Gréisst, an der Gréisst vum Hannergrond kann an Pixel oder Prozentzuelen, an all aner Unitéiten virbereet ginn.

Mat dësem Numm, sinn et e puer Problemer: fir richteg Kaart vun enger Hannergrond am virdrun Versiounen vun den Browser opgehuewen benotzt gin. Natierlech, ënnerstëtzt déi aktuell Versioun voll dës Spezialfäegkeeten an de Besoin fir spezifesch Eegeschafte verschwonnen.

Spezialfäegkeeten Hannergrond-Uschloss

Dëst Spezialfäegkeeten spezifizéiert d'Behuele vun der Hannergrond Biller iwwerdeems scrolling. Also kann et 3 Wäerter huelen (net d'ierwen dorënner, déi Gesamtgrupp vun der Attributer an dësem Artikel diskutéiert):

• fix - mécht d'Bild um Hannergrond vun fixen;
• Minière - Hannergrond Schrëftrulle mat de Rescht vun der Elementer;
• lokal - d'Bild op Hannergrond scrolled ass wann scrolling Inhalt huet. Hannergrond, dass doriwwer eraus d'Inhalter vun der Rumm geet ass fix.

Beispill vun benotzen:

Kierper {Hannergrond-Unhang fix}.

Moment, heescht Firefox net déi lescht Propriétéit (lokal) ënnerstëtzen.

Spezialfäegkeeten Hannergrond-Urspronk

Dësen Numm ass responsabel fir de Stellewäert Element. Fréi Browser verlaangen der Benotzung vun opgehuewen. De Besëtz selwer huet dräi Parameteren:

• padding-Këscht ass relativ zu der Südsäit Muster hir, iwwerdeems Kont ausgebild der deck vun der Rumm;
• Grenz-Këscht Eegeschafte anescht aus dem virdrun an datt d'Grenz Linn komplett oder deelweis iwwerlageren d'Muster kann;
• Inhalt-Këscht positionéiert Bild pryavyazyvaya hiren Inhalt.

Wann Dir MÉI Wäerter uginn, da kann Browser an hir eege Manéier reagéieren: Firefox an Opera zréckkommen nëmmen déi éischt Optioun.

Spezialfäegkeeten Hannergrond-widderhuelen

Als Regel, mussen wann den Hannergrond Bild uginn ass, et horizontal oder vertikal widderholl ginn. Fir dëst a fir d'Spezialfäegkeeten Hannergrond-widderhuelen. Sou, Spär Hannergrond, CSS déi esou eng Propriétéit enthält kann ee vun e puer Parameteren hunn:

• nee-widderhuelen - d'Bild op enger Säit an engem eenzege Versioun;
• widderhuelen - Hannergrond ass an der x an y widderholl;
• widderhuelen-x - nëmmen horizontal;
• widderhuelen-y - just vertikal;
• Raum - Hannergrond ass widderholl, mä wann Raum onméiglech ass tëscht de Biller ze fëllen an erschéngen eidel;
• Ronn - d'Bild ass -och, wann et de ganze Beräich vun ganzt Biller net fëllt heescht.

Beispill vun der Attributer:

Kierper {Hannergrond-widderhuelen: en Update widderhuelen widderhuelen} - ähnlech Hannergrond-widderhuelen: widderhuelen-y.

An CSS3 kann Wäerter fir MÉI Biller uginn wou Parameteren Oplëschtung, getrennt duerch Gänseféissecher.

Spezialfäegkeeten Hannergrond-Clip

Dëst Spezialfäegkeeten definéiert d'Behuele vun der Hannergrond ënner Grenze (e.g., am Fall vun der agekreest Rummen):

• padding-Linn drécke misst - Hannergrond am Banneschte vun der Spär gewisen;
• Grenz-Linn drécke misst - d'Bild kënnt ënner dem Kader;
• Inhalt-Linn drécke misst - d'Bild op der Hannergrond gëtt nëmmen am Inhalt erschéngen.

Beispill vun benotzen:

Kierper {Hannergrond-Clip: content- Këscht;}.

Chrom a Safari verlaangen -webkit- Préfixe.

Opazitéit Attributer an FILTER

Opazitéit Spezialfäegkeeten erlaabt Dir der Transparenz vun den Hannergrond ze setzen - CSS Propriétéit wäert all Browser an Aarbecht. Der Wäert ass an der Gamme vun 0,0 bis 1.0 inklusiv Formatioun. An dësem Fall, kënnt Dir d'Transparenz vun der CSS Hannergrond Formatioun kee ganz Wäert amplaz 0.3 ass genuch .3 ze schreiwen:

.block {Hannergrond-Bild: URL ( img.png); Opazitéit: .3;}.

Ze setzen Hannergrond Opazitéit, ass CSS gëeegent och fir IE Kraaft ënnert d'néngten Versioun, benotzen d'FILTER Spezialfäegkeeten:

.block {Hannergrond-Bild: URL ( img.png); FILTER: Alpha (Opazitéit = 30)}.

An dësem Fall ass d'Opazitéit Wäert tëschent 0 an 100 Note Formatioun datt d'Opazitéit verschiddene Transparenz Astellunge via RGBA Ierfschaft Spezialfäegkeeten: wann Opazitéit benotzt kloer gëtt net nëmmen den Hannergrond, mee och all d'Elementer an der Eenheet.

Ëmmer Är Benotzen Statistiken fir Direktiven ugeet Browser an all aner Länner kontrolléieren. De gréisste Problem vun all DTP - al Versioune vun IE, si maachen erlaben net dir déi voll Mooss CSS3 konzentréiert. An Layout vergiesst nët de speziell Servicer ze benotzen, déi kontrolléieren ob Äre Browser keng CSS Propriétéit ënnerstëtzt. Wann Dir net méi al Versioune vun Browser installéieren kann, fannen engem Service, dass de Site Aarbecht an MÉI Browser online wäert kontrolléieren.