Con l'avvento del lavoro CSS3 DTP per molti versi è diventato più facile e più logica: dopo tutto, è ora possibile fare per configurare in modo flessibile un oggetto, più raramente ricorrere a JavaScript.Diciamo che è necessario regolare la trasparenza dello sfondo - CSS offre subito diverse opzioni.Sfondo
definito da una serie di attributi (background-image, background-position, background-size, background-repeat, background-attachment, sfondo di origine, background-clip di, background-color), ognuno dei quali può essere prescritto da solo odi riunire sotto lo stesso sfondo attributo.Esaminiamo ciascuno di questi in modo più dettagliato.
attributo background-color
Nei CSS, il colore di sfondo può essere impostato in diversi modi: utilizzando il codice esadecimale, nome del colore o RGB-entry.In CSS3 è stato possibile utilizzare al posto di opzione RGB registrazione con RGBA.
codice esadecimale del colore è scritto nella proprietà dopo il reticolo: background-color: # FFDAB9.Se i caratteri a coppie corrispondono a un record, il codice è di solito un piccolo taglio: # ccff00 può essere scritta come # CF0:
body {background-color: # CF0;}.
nome là, anche nei colori più esotici.Ad esempio, oltre ai colori standard rosso e bianco, è possibile utilizzare navajowhite (#FFDEAD) o Honeydew2 (# E0EEE0):
body {background-color: purple;}.
ultima opzione RGB o registrare RGBA consente di specificare non solo il colore, ma anche la trasparenza dello sfondo CSS, ma il modo di lavorare in IE 9 solo versioni più vecchie.Altri browser riconoscono variante normale con la trasparenza.Secondo gli standard W3C è preferibile utilizzare lo stesso RGBA invece del RGB più usuale.
ultimo valore al RGBA imposta l'opacità dello sfondo e da 0 (trasparente) a 1 (opaco).
Ci sono alcuni valori insoliti.Il colore di sfondo può essere specificato utilizzando HSL e HSLA.Entrambi sono stati aggiunti in CSS3, e pertanto non è supportato dalla versione IE 9 o superiore.Le opzioni sono identiche a RGB o RGBA, solo in un formato diverso: Hue (tonalità - il valore sulla ruota dei colori, è dato in gradi), Saturazione (saturazione - intensità del colore in percentuale, da 0 a 100), Leggerezza (leggerezza - luminosità, misurata analogamente parametro Saturate).
attributo background-image
più versione cross-browser di uno sfondo trasparente - è l'uso dell'immagine.In CSS3, è possibile specificare anche altre immagini, questo viene fatto attraverso una virgola.Esempio:
body {background-image: url (bg1.png), url (bg2.png)}.
supporta questo anche IE8.Diverse immagini come sfondo utilizzato nel layout della gomma.Soprattutto, non dimenticate di utilizzare qualsiasi immagine come stabilito con il colore di sfondo CSS, perché gli utenti possono semplicemente caricare una foto.
attributo background-position
Se si utilizza un'immagine per definire il blocco 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 accettare istruzioni verbali (in alto, in basso, a sinistra, a destra), o numerico (interessi, pixel e altre unità).È necessario specificare i due valori per orizzontale e verticale: corpo
{background-position: centro destra;} - in questo esempio, lo sfondo sarà situato sul lato destro della pagina, con la parte superiore e inferiore della distanza all'immagine sono gli stessi.
attributo background-size
volte è necessario usare i CSS per allungare lo sfondo o ridurne le dimensioni.A tal fine, l'attributo background-size, e le dimensioni possono essere definiti come pixel di sfondo o percentuale, o in qualsiasi altra unità di misura.
Con questo attributo, ci sono alcuni problemi: per la corretta visualizzazione di uno sfondo di browser più vecchi è necessario utilizzare un prefisso.Naturalmente, le versioni attuali supportano pienamente questa caratteristica e la necessità di proprietà specifiche scomparse.
attributo background-attachment
Questo attributo specifica il comportamento dell'immagine di sfondo quando si scorre.Ad esempio, può prendere 3 valori (esclusi ereditano, per il totale di tutti gli attributi in questo articolo):
- fisso - rende l'immagine sullo sfondo di fisso;
- scorrimento - i rotoli di fondo con il resto degli elementi;
- locale - l'immagine sullo sfondo scorre se lo scorrimento è contenuto.Sfondo, che va oltre il contenuto è fisso.
Esempio di utilizzo: corpo
{background-attachment fisso}.
Attualmente, Firefox non supporta l'ultima proprietà (locale).
attributo background-origine
Questo attributo è responsabile per il posizionamento dell'elemento.Versioni browser precedenti richiedono l'uso di prefissi.La proprietà dispone di tre parametri:
- padding-box posizioni dal bordo dello sfondo, tenendo conto dello spessore del telaio;
- proprietà border-box diverse dalla precedente in quanto la linea di confine può essere completamente o parzialmente coprire il fondo;
- immagine posizionamento dei contenuti-box pryavyazyvaya suo contenuto.
Se si specificano più valori, il browser può reagire a modo loro: Firefox e Opera accettano solo la prima opzione.
attributo background-repeat
Come regola generale, se si specifica l'immagine di sfondo, si deve essere ripetuta orizzontalmente o verticalmente.Per questo e usato l'attributo background-repeat.Così, blocco sfondo, CSS che contiene tale proprietà può avere una delle diverse opzioni:
- no-repeat - immagine viene visualizzata sulla pagina in una sola forma;
- ripetizione - modello ripetuto in xey;
- repeat-x - solo orizzontalmente;
- repeat-y - solo verticalmente;
- spazio - schema si ripete, ma se lo spazio non è compilato, poi ci sono vuoti tra le immagini;
- turno - l'immagine verrà ridimensionata, se non riempie l'intera area intera immagine.
Esempio di attributo:
body {background-repeat: no-repeat repeat} - simile background-repeat: repeat-y.
In CSS3 può specificare i valori per più immagini se i parametri di trasferimento separati da virgole.
attributo background-clip di
Questo attributo specifica il comportamento del fondo sotto le mura (per esempio, nel caso delle cornici tratteggiate):
- padding-box - sfondo visualizzato all'interno del blocco;
- border-box - rientra nell'ambito di applicazione dell'immagine;
- contenuto-contenitore - l'immagine sullo sfondo appare solo all'interno del contenuto.
Esempio di utilizzo:
body {background-clip: content-box;}.
Chrom e Safari richiedono l'uso del -webkit- prefisso.
attributo opacità e filtrare
attributo opacità consente di impostare la trasparenza di fondo - proprietà CSS funziona in tutti i browser.Il valore è regolabile da 0,0 a 1,0 compreso.Con questo è possibile impostare la trasparenza dello sfondo CSS senza un valore intero invece di 0,3 è sufficiente scrivere .3:
.block {background-image: url (img.png);Opacità: 0,3;}.
Per impostare la trasparenza di fondo, CSS è adatto anche per IE sotto la nona versione, utilizzare il filtro di attributo:
.block {background-image: url (img.png);Filtro: alpha (opacità = 30);}.
In questo caso, l'opacità si trova tra 0 e 100. Si noti che l'opacità attributo diverse impostazioni di trasparenza tramite RGBA eredità: l'opacità con uno sfondo trasparente non è solo, ma anche tutti gli elementi all'interno dell'unità.
Assicurarsi sempre che le statistiche di utilizzo del browser della CSI e tutti gli altri paesi.Il problema più grande di tutti DTP - vecchie versioni di IE, che non consentono l'uso completo del CSS3.Se il layout non dimenticare di utilizzare i servizi speciali che verificano se il vostro browser è un CSS di proprietà.Se non è possibile installare le versioni più vecchie dei browser, si ottiene il servizio che controlla il funzionamento del sito in diversi browser on-line.
