trasparenza dello sfondo CSS. sfondo trasparente o un testo con i CSS

Con l'avvento dei CSS3 web designer funzionare in molti modi è diventato più facile e più logica: dopo tutto, è ora possibile personalizzare in modo flessibile veramente qualsiasi oggetto, meno frequentemente ricorrere a JavaScript. Diciamo che è necessario regolare la trasparenza dello sfondo – CSS offre subito diverse opzioni.

Sfondo definito da un insieme di attributi (background-immagine, sfondo posizioni , background-size, background-repeat, background-attaccamento, fondo di origine, background-etere, background-colore), ciascuno dei quali può essere assegnato separatamente o combinati sotto l'attributo sfondo. Esaminiamo ciascuno di loro in dettaglio.

Attributo background-color

Nei CSS, il colore di sfondo può essere impostato in diversi modi: usando un codice esadecimale, nome del colore o RGB-entry. In CSS3 è stato possibile usare al posto di opzione RGB-registrazione con RGBA.

codice esadecimale del colore viene registrato nella proprietà dopo il reticolo: background-color: # FFDAB9. Se i personaggi di questa voce sono le stesse coppie, il codice è di solito un piccolo taglio: # ccff00 può essere scritta come # cf0:

body {background-color: # cf0 ;}.

Il nome è, anche nei colori più esotici. Ad esempio, oltre allo standard rosso e bianco è possibile utilizzare navajowhite (#FFDEAD) o Honeydew2 (# E0EEE0):

body {background-color: purple; }.

Quest'ultima opzione è RGB o la messa RGBA consente di specificare non solo il colore, ma anche la trasparenza dello sfondo CSS, ma il metodo funziona solo nelle versioni di IE di età superiore a 9. Altri browser riconoscono versione normale con la trasparenza. Secondo gli standard W3C è preferibile usare RGBA ancora invece del RGB più usuale.

L'ultimo valore RGBA sfondo e imposta l'opacità da 0 (trasparente) a 1 (opaco).

Ci sono alcuni valori insoliti. Il colore di sfondo può essere impostato utilizzando l'HSL e HSLA. Entrambi sono stati aggiunti CSS3, e pertanto non sono supportati da IE versione 9 o superiore. Realizzazioni RGB identici o RGBA, solo con il formato differente: Hue (tonalità – valore sulla ruota colore, è dato in gradi), Saturazione (saturazione – intensità del colore in percentuale, da 0 a 100), leggerezza (leggerezza – luminosità, misurata analogamente parametro Saturate ).

background-image Attributo

La versione più cross-browser dello sfondo trasparente – questo è l'uso dell'immagine. In CSS3, è possibile impostare anche altre immagini, questo viene fatto attraverso una virgola. esempio:

{Immagine di sfondo del corpo: url (bg1.png), url (bg2.png)}.

Questo modo di supportare anche IE8. Diverse immagini sullo sfondo della gomma utilizzata nel layout. È importante sottolineare che, non dimenticare di usare qualsiasi immagine e impostare il colore di sfondo nel CSS, in quanto gli utenti possono semplicemente caricare un'immagine.

Attributo background-position

Se si usa l'immagine per impostare l'unità di fondo, CSS consente di posizionare l'immagine in qualsiasi punto dello schermo. Per impostazione predefinita, l'immagine si trova nell'angolo in alto a sinistra. Attributo prende sia le istruzioni verbali (in alto, in basso, a sinistra, a destra), una numerico (interessi, i pixel e le altre unità). In questo caso, è necessario specificare due valori, orizzontale e verticale:

body {background-position: centro-destra ;} – in questo esempio, il modello sarà situato sul lato destro della pagina, la parte superiore e inferiore della distanza dell'immagine allo stesso.

Attributo background-size

A volte è necessario per allungare il fondo CSS o ridurne le dimensioni. A tale scopo, utilizzare l'attributo background-size, e le dimensioni dello sfondo può essere impostato in pixel o percentuali, e le altre unità.

Con questo attributo, ci sono alcuni problemi: per una corretta visualizzazione di uno sfondo nelle versioni precedenti dei prefissi del browser da utilizzare. Naturalmente, la versione attuale supporta pienamente questo attributo e la necessità per le proprietà specifiche scomparso.

Attributo background-attachment

Questo attributo specifica il comportamento delle immagini di sfondo durante lo scorrimento. Quindi, si può prendere 3 valori (escluso l'ereditare, il totale per tutti gli attributi discussi in questo articolo):

• fisso – rende l'immagine sullo sfondo del fisso;
• scorrere – scorre sfondo con il resto degli elementi;
• locale – l'immagine di sfondo viene fatto scorrere se lo scorrimento ha un contenuto. Sfondo che va oltre il contenuto della cornice è fissata.

Esempio di utilizzo:

body {background-attachment fisso}.

Attualmente, Firefox non supporta l'ultima proprietà (locale).

Attributo background-origin

Questo attributo è responsabile per l'elemento di posizionamento. I primi browser richiedono l'uso di prefissi. La struttura in sé ha tre parametri:

• padding-box è posizionato rispetto al modello bordo, tenendo conto dello spessore del telaio;
• proprietà border-box differenti dal precedente in quanto la linea di confine può essere sovrappongono completamente o parzialmente il modello;
• Immagine posizionamento dei contenuti-box pryavyazyvaya suo contenuto.

Se si specificano più valori, allora i browser in grado di reagire a modo loro: Firefox e Opera percepiscono solo la prima opzione.

Attributo background-repeat

Di norma, se è specificato l'immagine di sfondo, deve essere ripetuta orizzontalmente o verticalmente. Per questo e utilizzato l'attributo background-repeat. Così, background blocco, CSS che contiene una tale proprietà può avere uno dei diversi parametri:

• no-repeat – l'immagine viene visualizzata su una pagina in un'unica versione;
• ripetere – sfondo si ripete nella xey;
• repeat-x – solo orizzontalmente;
• repeat-y – solo verticalmente;
• spazio – sfondo si ripete, ma se lo spazio è impossibile da colmare tra le immagini appaiono vuote;
• tondo – l'immagine viene ridimensionata, se non riempie l'intera area delle immagini intere.

Esempio degli attributi:

body {background-repeat: no- repeat repeat} – simile background-repeat: repeat-y.

In CSS3 possono specificare i valori per più immagini quando si elencano i parametri, separati da virgole.

Attributo background-clip

Questo attributo definisce il comportamento del fondo sotto le mura (ad esempio, nel caso dei telai tratteggiate):

• padding-box – sfondo visualizzata nella parte interna del blocco;
• border-box – l'immagine rientra nel quadro;
• contenuto-contenitore – l'immagine sullo sfondo appare solo all'interno del contenuto.

Esempio di utilizzo:

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

Chrom e Safari richiedono il prefisso -webkit-.

attributi di opacità e filtri

attributo opacità consente di impostare la trasparenza dello sfondo – proprietà CSS funziona in tutti i browser. Il valore è impostato nell'intervallo da 0.0 a 1.0 compreso. In questo caso, è possibile impostare la trasparenza dello sfondo CSS nessun valore intero invece di 0,3 è sufficiente scrivere .3:

.block {background-image: url ( img.png); Opacità: 0,3;}.

Per impostare l'opacità di fondo, CSS è adatto anche per IE sotto la nona versione, utilizzare l'attributo di filtro:

.block {background-image: url ( img.png); Filtro: alpha (opacità = 30)}.

In questo caso, il valore di opacità è impostato tra 0 e 100. Si noti che l'opacità attributo diverse impostazioni di trasparenza attraverso RGBA ereditarietà: quando si utilizza l'opacità diventa chiaro non solo lo sfondo, ma anche tutti gli elementi all'interno dell'unità.

monitorare sempre le statistiche di utilizzo per i browser della CSI e tutti gli altri paesi. Il problema più grande di tutti DTP – vecchie versioni di IE, che non consentono di utilizzare il CSS3 piena portata. Nel layout di non dimenticare di utilizzare i servizi speciali che verificare se il browser supporta qualsiasi proprietà CSS. Se non è possibile installare le versioni più vecchie dei browser, trovare un servizio che controllerà il lavoro sito in più browser on-line.