CSS transparència de fons. fons transparent o text amb CSS

Amb l'arribada dels dissenyadors web CSS3 treballar en molts aspectes s'ha convertit en més fàcil i més lògic: després de tot, ara pot realment flexible personalitzar qualsevol objecte, amb menys freqüència recórrer a JavaScript. Diguem que cal ajustar la transparència del fons - CSS ofereix diverses opcions immediatament.

Antecedents definit per un conjunt d'atributs (Imatge de fons, el fons de posició , el fons de grandària, de fons de la repetició, fons en l'afecció, fons d'origen, de fons del clip, background-color), cadascun dels quals es poden assignar per separat o combinats sota l'atribut fons. Examinem cada un d'ells en detall.

Atribut background-color

En CSS, el color de fons es pot configurar de diverses maneres: utilitzant un codi hexadecimal, nom del color o RGB-entrada. En CSS3 es va fer possible utilitzar l'opció RGB-gravació amb RGBA en canvi.

codi de color hexadecimal es registra a la propietat després de la gelosia: background-color: # FFDAB9. Si els personatges d'aquesta entrada són els mateixos parells, el codi és en general una mica de tall: # ccff00 es pot escriure com # cf0:

body {background-color: # cf0 ;}.

El nom és, fins i tot en els colors més exòtics. Per exemple, a més de l'estàndard de color vermell i blanc es pot utilitzar NavajoWhite (#FFDEAD) o Honeydew2 (# E0EEE0):

body {background-color: porpra; }.

L'última opció és l'entrada RGB o RGBA li permet especificar no només el color sinó també la transparència del fons del CSS, però el mètode només funciona en versions de l'IE majors de 9. Altres navegadors reconeixen versió normal amb transparència. D'acord amb els estàndards del W3C és preferible utilitzar encara RGBA en lloc del RGB més habitual.

L'últim valor de fons RGBA i estableix l'opacitat de 0 (transparent) a 1 (opac).

Hi ha alguns valors inusuals. El color de fons es pot ajustar amb la HSL i HSLA. Tots dos es van afegir a CSS3, i per tant no són admesos per IE versió 9 o superior. Les formes de realització RGB idèntics o RGBA, només en un format diferent: Hue (ombra - valor en la roda de color, es dóna en graus), saturat (saturació - intensitat del color com un percentatge, de 0 a 100), lleugeresa (lluminositat - brillantor, mesuren de manera similar paràmetre Saturate ).

Atribut Imatge de fons

La versió més multi-navegador del fons transparent - això és l'ús de la imatge. En CSS3, pot ajustar encara més les imatges, això es fa mitjançant una coma. exemple:

{Imatge de fons de cos: url (bg1.png), URL (bg2.png)}.

Aquesta forma de donar suport fins i tot IE8. Diverses imatges en el fons del cautxú utilitzat en el disseny. És important destacar que no s'oblidi d'usar qualsevol imatge i establir el color de fons en CSS, ja que els usuaris poden simplement carregar una imatge.

Atribut background-position

Si s'utilitza la imatge per fixar la unitat de fons, CSS li permet col·locar la imatge en qualsevol lloc de la pantalla. Per defecte, la imatge es troba a la cantonada superior esquerra. Atribut pren qualsevol de les instruccions verbals (amunt, avall, esquerra, dreta), una numèrica (interessos, píxels i altres unitats). En aquest cas, ha d'especificar dos valors, horitzontals i verticals:

body {background-position: dret i central ;} - en aquest exemple, el patró es troba al costat dret de la pàgina, la part superior i inferior de la distància de la imatge a la mateixa.

Atribut background-size

A vegades és necessari estirar el fons CSS o reduir la seva grandària. Per a això, utilitzar l'atribut fons de grandària, i la mida dels antecedents es pot ajustar en píxels o percentatges, i qualssevol altres unitats.

Amb aquest atribut, hi ha alguns problemes: per a una correcta visualització d'un fons en les versions anteriors dels prefixos navegador per ser utilitzat. Per descomptat, la versió actual és totalment compatible amb aquest atribut i la necessitat de propietats específiques desaparèixer.

Atribut background-attachment

Aquest atribut especifica el comportament de les imatges de fons mentre es desplaça. Per tant, pot prendre 3 valors (sense incloure la s'hereta, el total per a tots els atributs esmentats en aquest article):

• fixa - fa que la imatge en el fons de fix;
• desplaçar-- rotllos de fons amb la resta dels elements;
• locals - la imatge de fons és desplaçat si el desplaçament té contingut. Antecedents que va més enllà dels continguts de la trama és fixa.

Exemple d'ús:

body {background-attachment fixa}.

Actualment, el Firefox no és compatible amb l'última propietat (local).

Atribut background-origen

Aquest atribut és responsable de l'element de posicionament. Els primers navegadors requereixen l'ús de prefixos. La propietat en si té tres paràmetres:

• padding-caixa es posiciona en relació amb el patró de vora, tenint en compte el gruix de la trama;
• propietats de vora de quadre diferents de l'anterior en què la línia de límit pot ser completament o parcialment se superposen el patró;
• posicionament d'imatge contingut-box pryavyazyvaya seu contingut.

Si s'especifica diversos valors, a continuació, els navegadors poden reaccionar a la seva manera: Firefox i Opera perceben només la primera opció.

Atribut background-repeat

Com a regla general, si no s'especifica la imatge de fons, s'ha de repetir horitzontal o verticalment. Per aquesta i s'utilitza l'atribut background-repeat. Per tant, el bloc de fons, CSS, que conté una propietat d'aquest tipus pot tenir un de diversos paràmetres:

• no-repeat - apareix la imatge d'una pàgina en una sola versió;
• repetir - fons es repeteix a la x i y;
• repetir-x - només en horitzontal;
• repetir-i - només vertical;
• espai - de fons es repeteix, però si l'espai és impossible d'omplir enmig de les imatges apareixen buits;
• ronda - la imatge es escala, si no omple tota l'àrea de la totalitat de les imatges.

Exemple dels atributs:

body {background-repeat: no- repetició de la repetició} - similars background-repeat: repeat-i.

En CSS3 poden especificar valors per a múltiples imatges quan s'enumeren els paràmetres, separats per comes.

Atribut background-clip

Aquest atribut defineix el comportament del fons sota els límits (per exemple, en el cas de les trames de punts):

• padding-caixa - fons que es mostra a l'interior de l'illa;
• frontera-box - la imatge s'emmarca dins;
• el contingut de la caixa - la imatge en el fons només apareixerà en el contingut.

Exemple d'ús:

body {background-clip: contingut- caixa;}.

Chrom i Safari requereixen prefix -webkit-.

atributs d'opacitat i filtre

atribut d'opacitat li permet establir la transparència del fons - propietat CSS funciona en tots els navegadors. El valor s'estableix en el rang de 0,0 a 1,0 inclosos. En aquest cas, es pot establir la transparència del fons del CSS sense valor sencer en lloc de 0,3 és suficient per escriure 0.3:

.block {Imatge de fons: url ( img.png); opacitat: 0,3;}.

Per establir la opacitat del fons, CSS és convenient fins i tot per IE per sota de la novena versió, utilitzeu l'atribut de filtre:

.block {Imatge de fons: url ( img.png); filtre: alfa (opacitat = 30)}.

En aquest cas, el valor d'opacitat s'estableix entre 0 i 100. Recordeu que l'opacitat d'atributs diferents valors de transparència a través de l'herència RGBA: quan s'utilitza l'opacitat es fa evident no només el fons, sinó també tots els elements dins de la unitat.

Sempre supervisar les estadístiques d'ús dels navegadors de la CEI i tots els altres països. El major problema de tots DTP - versions antigues de l'IE, que no li permet usar el CSS 3 en tota la seva extensió. En la disposició no s'oblidi d'utilitzar els serveis especials de comprovar si el navegador és compatible amb qualsevol propietat CSS. Si no es pot instal·lar versions antigues de navegadors, trobar un servei que va a comprovar el lloc de treball en diversos navegadors en línia.