Sfondo CSS. Guida completa

Con l'avvento dei CSS3, il lavoro dei layout designer è diventato molto più semplice e logico: dopotutto, ora puoi configurare davvero in modo flessibile qualsiasi oggetto, ricorrendo sempre meno a JavaScript. Diciamo che devi regolare la trasparenza dello sfondo: i CSS offrono immediatamente diverse opzioni.

Lo sfondo è specificato da una serie di attributi , background-repeat, background-attachment, background-origin, background-clip, background-color) e ciascuno di essi può essere specificato separatamente o combinato sotto l'attributo background. Analizziamo ciascuno di essi in modo più dettagliato.

attributo colore di sfondo

Anche IE8 supporta questo metodo. Diverse immagini come sfondo vengono utilizzate nel layout fluido. Soprattutto, non dimenticare, quando si utilizza qualsiasi immagine, anche impostata colore CSS sfondo, poiché gli utenti potrebbero semplicemente non caricare l'immagine.

attributo posizione di sfondo

Se utilizzi un'immagine per impostare lo sfondo di un blocco, CSS ti consentirà di posizionare l'immagine in qualsiasi punto dello schermo. Per impostazione predefinita, l'immagine è posizionata a sinistra angolo superiore. L'attributo accetta indicazioni verbali (in alto, in basso, a sinistra, a destra) o numeriche (percentuali, pixel e altre unità di misura). In questo caso è necessario specificare due valori: orizzontalmente e verticalmente:

body (posizione dello sfondo: centro a destra;) - in questo esempio, lo sfondo si troverà sul lato destro della pagina e le distanze inferiore e superiore dall'immagine sono le stesse.

attributo della dimensione dello sfondo

A volte richiesto con usando CSS allungare lo sfondo o ridurne le dimensioni. Per fare ciò, utilizza l'attributo background-size e la dimensione dello sfondo può essere impostata sia in pixel o percentuali, sia in qualsiasi altra unità di misura.

Ci sono alcuni problemi con questo attributo: for visualizzazione corretta lo sfondo nelle versioni precedenti dei browser deve utilizzare i prefissi. Certamente, versioni attuali supportano completamente questo attributo e non sono necessarie proprietà specifiche.

attributo background-attachment

Questo attributo specifica il comportamento dell'immagine di sfondo durante lo scorrimento. Quindi, può assumere 3 valori (non tenendo conto dell'ereditarietà, che è comune a tutti gli attributi presentati in questo articolo):

• fisso- rende immobile l'immagine sullo sfondo;
• scorrere- lo sfondo scorre insieme al resto degli elementi;
• Locale- l'immagine sullo sfondo scorre se il contenuto è scorrevole. Lo sfondo che va oltre il contenuto è fisso.

Esempio di utilizzo:

body (fissaggio dello sfondo fisso).

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

attributo background-origine

Questo attributo è responsabile del posizionamento dell'elemento. Browser prime versioni richiedono l'uso di prefissi. La proprietà stessa ha tre parametri:

• scatola di imbottitura posiziona lo sfondo rispetto al bordo, tenendo conto dello spessore della cornice;
• scatola di confine differisce dalla proprietà precedente in quanto la linea di confine può sovrapporsi completamente o parzialmente allo sfondo;
• casella dei contenuti posiziona l'immagine, ancorandola al contenuto.

Se vengono forniti più valori, i browser potrebbero reagire in modo diverso: Firefox e Opera accettano solo la prima opzione.

attributo background-repeat

In genere, se lo sfondo è impostato su un'immagine, dovrebbe essere ripetuto orizzontalmente o verticalmente. Ecco a cosa serve l'attributo background-repeat. Ad esempio, lo sfondo di un blocco il cui CSS contiene tale proprietà può avere una delle diverse opzioni:

• senza ripetizione- l'immagine appare sulla pagina in un'unica versione;
• ripetere- lo sfondo viene ripetuto lungo gli assi xey;
• ripetere x- solo in orizzontale;
• ripetere-y- solo in verticale;
• spazio- lo sfondo viene ripetuto, ma se lo spazio non può essere riempito, compaiono dei vuoti tra le immagini;
• il giro- l'immagine viene ridimensionata se non è possibile riempire l'intera area con immagini intere.

Un esempio di utilizzo dell'attributo:

body (ripetizione in background: ripetizione senza ripetizione)- allo stesso modo background-repeat: repeat-y.

In CSS3 è possibile impostare valori per più immagini elencando le opzioni separate da virgole.

attributo background-clip

Questo attributo definisce il comportamento dello sfondo sotto i bordi (ad esempio, nel caso di bordi tratteggiati):

• scatola di imbottitura- lo sfondo viene visualizzato rigorosamente all'interno del blocco;
• scatola di confine- l'immagine va sotto l'inquadratura;
• casella dei contenuti— l'immagine sullo sfondo appare solo all'interno del contenuto.

Esempio di utilizzo:

body (clip di sfondo: casella di contenuto;).

Chrom e Safari richiedono l'uso del prefisso -webkit-.

attributi di opacità e filtro

L'attributo opacità consente di impostare la trasparenza dello sfondo: la proprietà CSS funzionerà in tutti i browser. Il valore è impostato tra 0,0 e 1,0 inclusi. Con questo puoi impostare la trasparenza sfondo CSS senza valore intero: invece di 0.3 basta scrivere .3:

.block (immagine di sfondo: url(img.png); opacità: .3;).

Per impostare la trasparenza dello sfondo, di cui CSS è adatto anche per IE al di sotto della nona versione, utilizzare l'attributo filter:

.block (immagine di sfondo: url(img.png); filtro: alpha(opacity=30);).

In questo caso, il valore di opacità è impostato tra 0 e 100. Si noti che l'attributo di opacità è diverso dall'impostazione di trasparenza con utilizzando RGBA ereditarietà: quando usato opacità trasparente diventa non solo lo sfondo, ma anche tutti gli elementi all'interno del blocco.

Tieni sempre d'occhio le statistiche sull'utilizzo del browser per la CSI e tutti gli altri paesi. Più un grosso problema di tutti i progettisti di layout sono vecchie versioni di IE, sono quelle che non consentono il pieno utilizzo di CSS3. Quando il layout, non dimenticare di utilizzare servizi speciali, che controlla se il tuo browser ne supporta qualcuno css proprietà. Se non riesci a installare versioni precedenti dei browser, trova un servizio che eseguirà il check-in del sito browser diversi in linea.

Specifica l'immagine da utilizzare come immagine di sfondo celle di tabella. A differenza delle immagini normali, lo sfondo non è impostato su una larghezza o un'altezza e viene sempre visualizzato a grandezza intera con una scala del 100%. Se l'immagine è più piccola della larghezza o dell'altezza della cella, l'immagine viene ripetuta orizzontalmente a destra e in basso, allineandosi come un mosaico. Per questo, al bivio immagini di sfondo potrebbero esserci differenze visibili che sono evidenti ai visitatori del sito. Quando scegli un'immagine di sfondo, assicurati che ci sia un contrasto sufficiente tra essa e il contenuto della cella. È inoltre consentito utilizzare immagini animate come sfondo formato GIF ma distraggono i lettori.

Sintassi

...

Valori

Qualsiasi indirizzo immagine valido: puoi utilizzare un percorso relativo o assoluto.

Valore predefinito

Esempio

Nota

Impostare immagine di sfondo per la cella, utilizzare la proprietà dello stile di sfondo, aggiungendola al selettore td o th.

Browser

La seguente notazione viene utilizzata nella tabella del browser.

• - l'elemento è completamente supportato dal browser;
• - l'elemento non viene percepito dal browser e viene ignorato;
• - può apparire durante il funzionamento vari errori oppure l'elemento è supportato con le prenotazioni.

Il numero indica la versione del browser da cui è supportato l'elemento.

Penso che non ci sia un solo sito in cui la proprietà non sarebbe stata utilizzata sfondo CSS . Sembrerebbe, cosa potrebbe esserci di più semplice di questa proprietà? Ma no, le sue possibilità sono molto più ampie della normale impostazione di un'immagine o di un colore come sfondo di una pagina. Alcuni saranno familiari e altri saranno nuovi per molti. In ogni caso, sarà utile conoscere a fondo come funziona il background.

CSS3 ha apportato molte novità alla proprietà, come la trasparenza e l'impostazione di più immagini come sfondo, ma ne parleremo di seguito, ma prima tratteremo le basi della proprietà sfondo.

colore di sfondo

Sono abbastanza sicuro che hai già eseguito l'assegnazione del colore di sfondo più volte. Questo può essere fatto usando diversi tipi di notazione: normale (viene usato il nome del colore), esadecimale o notazione RGB. Ogni tipo è equivalente, usa quello che ti piace di più. Cerco di usare la versione più corta, e per la percezione è più semplice e il file di stile è di dimensioni un po' più piccole.

P (colore di sfondo: rosso;) p (colore di sfondo: #f00;) p (colore di sfondo: #ff0000;) p (colore di sfondo: rgb(255, 0, 0;))

CSS3 introduce il supporto alla trasparenza, quindi possiamo aggiungerlo al nostro colore, in questo modo:

P (colore di sfondo: rgba(255, 0, 0, 0.5);)

L'ultima cifra imposta la trasparenza al 50%. È possibile impostare il valore della trasparenza da 0 (sfondo completamente trasparente) a 1 (completamente opaco).

immagine di sfondo

Anche questa proprietà viene utilizzata molto spesso, permette di assegnare un'immagine allo sfondo. CSS3 aggiunge la possibilità di assegnare più immagini a uno sfondo, ognuna creando uno strato di sorta, quindi ognuna si sovrappone alla precedente. Perché potrebbe essere utile? Tutto è abbastanza semplice: diciamo che devi avvitare piccole cose in ciascuno degli angoli del sito. Fornito più o meno disposizione in gomma l'utilizzo di un'immagine non è un'opzione. Pertanto, creiamo 4 "livelli", spostiamo ogni immagine nel proprio angolo e il gioco è fatto, il problema è risolto

Corpo (immagine di sfondo: url("image1"), url("image2"), url("image3"))

Se devi assegnare un'immagine allo sfondo, lasciamo solo la prima nel codice, penso che questo sia comprensibile.
Quando si utilizza un'immagine come sfondo, è necessario ricordare due regole:

• Chiedi colore contrastante sfondo nel caso in cui l'utente non veda un'immagine per qualche motivo. Può disabilitare banalmente la visualizzazione delle immagini, risparmia traffico.
• non utilizzare un'immagine di sfondo per trasmetterne una Informazioni importanti. Per il motivo sopra indicato, l'utente potrebbe non vederlo.

Il supporto per più immagini di sfondo è piuttosto ampio. Tutti i browser, anche IE8, supportano questa proprietà.