CSS eftergrûn transparânsje. Trochsichtich eftergrûn of tekst mei CSS

Mei de komst fan CSS3 web ontwerpers wurkje yn in protte manieren hat wurden ienfâldiger en logysker: nei alles, kinne jo no echt fleksibel oanpasse elts foarwerp, minder faak resorting nei JavaScript. Litte we sizze jo moatte oanpasse de transparânsje fan de eftergrûn - CSS fuortendaliks biedt ferskate opsjes.

Eftergrûn bepaald troch in set fan attributen (eftergrûn-image, eftergrûn-posysje , eftergrûn-grutte, eftergrûn-repeat, eftergrûn-attachment, eftergrûn-komôf, eftergrûn-clip, background-kleur), elk dêrfan kin wurde tawiisd apart of kombinearre ûnder it predikaat eftergrûn. Lit ús ûndersykje elk fan harren yn detail.

Attribute background-color

Yn CSS, de eftergrûnkleur kin ynsteld wurde op ferskate wizen: mei help fan in seiskante koade, kleur namme of RGB-yngong. Yn CSS3 waard it mooglik om te brûken ynstee fan RGB-opname opsje mei RGBA.

Hex kleur koade is fêstlein yn it besit neidat de lattice: background-color: # FFDAB9. As de personaazjes yn dizze entry binne itselde pearen, de koade is meastal in lytse besuniging: # ccff00 kin skreaun wurde as # cf0:

body {background-color: # cf0 ;}.

De namme is, sels yn 'e meast eksoatyske kleuren. Bygelyks, neist de standert reade en wite kinne jo brûke Navajo-wytcolor (#FFDEAD) of Honeydew2 (# E0EEE0):

body {background-color: purple; }.

Dy lêste opsje is RGB of RGBA yngong kinne jo opjaan net allinne kleur, mar ek de transparânsje fan de CSS eftergrûn, mar de metoade wurket allinnich yn IE ferzjes âlder as 9. Oare browsers werkenne normaal ferzje mei transparânsje. Neffens de W3C noarmen is it de foarkar te brûken noch RGBA ynstee fan de mear wenstige RGB.

De lêste wearde yn RGBA eftergrûn en stelt de dekking fan 0 (trochsichtich) nei 1 (ûntrochsichtich).

Der binne inkele ûngewoane wearden. De eftergrûnkleur kin ynsteld wurde mei help fan de HSL en HSLA. Beide waarden tafoege oan CSS3, en dêrom wurde net stipe troch IE ferzje 9 of heger. Embodiments identike RGB of RGBA, allinnich yn in oar formaat: Tint (skaad - wearde op 'e kleur tsjil, wurdt jûn yn graden), sêdzje (sêding - kleur yntinsiteit as in persintaazje, fan 0 oant 100), Lightness (helderheid - helderheid, mjitten similarly Parameter sêdzje ).

Attribute background-ôfbylding

De meast cross-browser ferzje fan de trochsichtich eftergrûn - dat is it brûken fan de ôfbylding. Yn CSS3, kinne jo ynstelle noch mear printsjes, dat wurdt dien troch in komma. foarbyld:

{Background-body image: url (bg1.png), url (bg2.png)}.

Dizze manier fan stypjen sels IE8. Ferskate printsjes yn de eftergrûn fan it rubber brûkt yn it jaske. Wichtich is dat ferjit net te brûken eltse byld en set de eftergrûnkleur yn CSS, as brûkers kinne gewoan oplade in byld.

Attribute eftergrûn-posysje

As jo gebrûk meitsje fan de ôfbylding om de eftergrûn ienheid, CSS jout jo de mooglikheid om de ôfbylding oeral op it skerm. Standert, it byld leit yn de boppeste linker hoeke. Attribút nimt ofwol ferbaal ynstruksjes (top, ûnderkant, lofts, rjochts), in numerike (rinte, piksels en oare ienheden). Yn dit gefal moatte jo spesifisearje twa wearden, horizontale en fertikale:

body {background-posysje: rjochter sintrum ;} - yn dit foarbyld, it patroan komt te lizzen oan de rjochterkant fan de side, de boppe-of ûnderkant fan it byld ôfstân nei itselde.

Attribute eftergrûn-grutte

Soms is it nedich om te oprekke de CSS eftergrûn of ferlytsje syn grutte. Om dit te dwaan, brûk it predikaat eftergrûn-grutte, en de grutte fan 'e eftergrûn kin ynsteld wurde yn piksels of persintaazjes, en eltse oare ienheden.

Mei dizze attribút, der binne in pear problemen: foar korrekt werjefte fan in eftergrûn yn de eardere ferzjes fan 'e blêder foarheaksels te brûkt wurde. Fansels, de hjoeddeiske ferzje folslein stipet dizze attribút en it ferlet fan spesifike eigenskippen ferdwûn.

Attribute eftergrûn-attachment

Dit attribút spesifisearret it gedrach fan de eftergrûnôfbyldings wylst skowen. Sa, kin nimme 3 wearden (net wêrûnder de hiemen, it totale foar alle attributes besprutsen yn dit artikel):

• fêste - makket de foto op 'e eftergrûn fan fêste;
• rôlje - eftergrûnynformaasje Scrolls mei de rest fan 'e eleminten;
• lokaal - it byld op de eftergrûn wurdt scrolled as scrolling hat ynhâld. Eftergrûn dat giet fierder as de ynhâld fan it frame wurdt fêst.

Foarbyld fan gebrûk:

body {eftergrûn-attachment fixed}.

Op it stuit, Firefox stipet it lêste eigendom (lokale).

Attribute eftergrûn-komôf

Dit attribút is ferantwurdlik foar de posysjonearring elemint. Iere browsers easkje it brûken fan foarheaksels. It pân sels hat trije parameters:

• WORD-box gepositioneerd relatyf oan de râne patroan, wylst rekken hâldend mei de dikte fan it frame;
• border-box eigenskippen oars út de foarige yn dat de grins line kin hielendal of foar in part oerlaapje it patroan;
• content-box posisjonearring image pryavyazyvaya syn ynhâld.

As jo spesifisearje meardere wearden, dan browsers kinne reagearje op harren eigen wize: Firefox and Opera gewaar wurde allinnich de earste opsje.

Attribute eftergrûn-Repeat

As regel, as de eftergrûn ôfbylding wurdt oantsjutte, dan moat wurde werhelle horizontaal of fertikaal. Foar dit en brûkt it predikaat eftergrûn-Repeat. Sa, blok eftergrûn, CSS dy't befettet sa'n eigendom kin hawwe ien of meardere parameters:

• no-repeat - de ôfbylding ferskynt op in side yn ien ferzje;
• repeat - eftergrûnynformaasje wurdt werhelle yn de x en y;
• repeat-x - allinne horizontaal;
• repeat-y - allinne fertikaal;
• romte - eftergrûn wurdt werhelle, mar as romte is ûnmooglik te foljen yn tusken de foto ferskine lege;
• round - it byld is op grutte brocht, as it net folje it hiele gebiet fan 'e hiele foto.

Foarbyld fan de attributes:

body {background-repeat: no- repeat repeat} - ferlykbere eftergrûn-repeat: werhelje-y.

Yn CSS3 kin spesifisearje wearden foar meardere ôfbylden as listing parameters, skieden troch komma 's.

Attribute eftergrûn-clip

Dit attribút definiearret it gedrach fan 'e eftergrûn ûnder de grinzen (bgl, yn it gefal fan' e dotted freems):

• WORD-box - eftergrûnynformaasje werjûn yn it binnenlân fan it blok;
• border-box - it byld komt ûnder it ramt;
• ynhâld-box - de foto op 'e eftergrûn sil allinnich ferskine binnen de ynhâld.

Foarbyld fan gebrûk:

body {background-clip: content- box;}.

Chrom and Safari nedich -webkit- foarheaksel.

Dekking attributen en filter

dekking skaaimerk kinne jo mei dizze ynstelling de transparânsje fan de eftergrûn - CSS property wurkje sil yn alle browsers. De wearde wurdt ynsteld yn it berik fan 0.0 oant 1.0 inclusive. Yn dat gefal kinne jo ynstelle yn de transparânsje fan de CSS eftergrûn gjin hiele wearde ynstee fan 0.3 is genôch te skriuwen .3:

.block {background-image: url ( img.png); Dekking: .3;}.

Om de eftergrûn dekking, CSS is geskikt sels foar IE ûnder it njoggende ferzje, brûk it filter attribute:

.block {background-image: url ( img.png); filter: alfa (dekking = 30)}.

Yn dat gefal wurdt de dekking wearde wurdt ynsteld tusken 0 en 100. Notysje dat de dekking attribute ferskillende transparânsje ynstellings fia RGBA erfskip: by it brûken fan dekking wurdt dúdlik net allinne de eftergrûn, mar ek al de eleminten binnen de ienheid.

Altyd tasjen op jo brûk statistiken foar CIS blêdzjers en alle oare lannen. It grutste probleem fan alle DTP - âldere ferzjes fan IE, sy net ta dat jo brûke de folsleine omfang CSS3. Yn opmaak ferjit net om de bysûndere tsjinsten dy't kontrolearje oft jo browser stipet gjin CSS eigendom. As jo jo net ynstallearje âldere ferzjes fan browsers, fine in tsjinst dy't sil kontrolearje de site wurk yn meardere browsers online.