Share
Abbiamo creato una guida completa per aiutarti a imparare i CSS, se hai appena iniziato con le nozioni di base o se vuoi esplorare CSS più avanzati.
In questo tutorial esamineremo una delle vecchie e più familiari proprietà CSS: sfondo. sfondo è una delle numerose proprietà CSS le cui funzionalità sono spesso trascurate. In effetti, ha visto un aggiornamento con CSS3, ricevendo nuove funzionalità oltre alla semplice aggiunta di un'immagine di sfondo o di un colore. Diamo un'occhiata ad alcuni di loro!
Posizionare un'immagine di sfondo è semplice e qualcosa che probabilmente conosci già. Se vogliamo posizionare lo sfondo in basso a destra dell'elemento, applichiamo in basso a destra a background-position. Per esempio:
#workspace width: 100%; larghezza massima: 668 px; altezza: 400 px; background-color: # 525d62; background-image: url (images / macbook.png); background-repeat: no-repeat; posizione di fondo: in basso a destra;
O con la stenografia, sfondo, dopo la definizione dell'URL:
#workspace width: 100%; larghezza massima: 668 px; altezza: 400 px; background: # 525d62 url (images / macbook.png) no-repeat in basso a destra;
Dall'avvento del CSS3 siamo stati in grado di specificare la posizione compensare; le distanze precise per le posizioni impostate. Prendendo il nostro esempio di in basso a destra, includiamo bottom 20px right 30px per posizionare il nostro background a 20px dal basso e 30px da sinistra.
#workspace width: 100%; larghezza massima: 668 px; altezza: 400 px; background-color: # 525d62; background-image: url (images / macbook.png); background-repeat: no-repeat; posizione di sfondo: destra 30px in basso 20px;
Le posizioni (parte inferiore, superiore, destra, sinistra) può essere definito in qualsiasi ordine, ma la lunghezza di offset deve essere definita dopo ogni posizione di sfondo.
Il merito va a Metin Kazan per le illustrazioni.
Il sfondo proprietà ci consente anche di aggiungere più immagini di sfondo. Pertanto, estendiamo il nostro esempio precedente con più materiale e gadget.
Aggiungiamo queste immagini a un singolo sfondo o immagine di sfondo dichiarazione separando ciascuno di essi con una virgola. Noi usiamo il background-position proprietà, che accetta anche più valori, per controllare ciascuna di quelle immagini di sfondo.
#workspace height: 400px; background-color: # 525d62; background-image: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); background-repeat: no-repeat; posizione di sfondo: 50% 50%, / * macbook.png * / 75% 295px, / * mouse.png * / 75% 230px, / * hdd.png * / 96% 240px, / * phone.png * / 20 % 250px, / * ipad.png * / 22% 190px, / * coffee.png * / 7% 280px; / * camera.png * /
Possiamo usare unità fisse (come i pixel), unità flessibili (come le percentuali) o una combinazione delle due.
Ogni coppia di valori rappresenta le coordinate dal in alto a sinistra dell'elemento contenitore, al in alto a sinistra dell'immagine. Ad esempio, la parte superiore sinistra dell'immagine della videocamera è 280 px dalla parte superiore del contenitore, quindi il 7% di a disposizione larghezza di fronte a sinistra.
Nota: Il a disposizione larghezza è la larghezza totale dell'elemento contenitore, meno la larghezza dell'immagine di sfondo. Pertanto un'immagine di sfondo posizionata al 50% lungo l'asse x appare esattamente centrata!
Inoltre, dal momento che il background-position è una proprietà animabile, possiamo creare uno sfondo più vivace e avvincente:
#workspace width: 600px; altezza: 400 px; background-color: # 525d62; background-repeat: no-repeat; background-image: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); posizione di sfondo: 50% 50%, 430px 295px, 425px 230px, 480px 240px, 105px 250px, 120px 190px, 40px 280px; animazione: 3s facilità 0s in avanti in avanti; @keyframes inView 0% background-position-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px; background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 20% background-position-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px; background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 30% background-position-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px; background-position-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 40% background-position-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px; background-position-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%; 50% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%; 60% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; background-position-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%; 100% background-position-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
Qui abbiamo impostato un numero di fotogrammi chiave lungo una sequenza temporale. Ad ogni keyframe abbiamo modificato il background-position-x e background-position-y di ogni immagine di sfondo. L'animazione è certamente rudimentale, quindi per favore batti il CodePen e miglioralo!
Nota: Clic Rerun in basso a destra della penna per vedere l'animazione
Gli sfondi che abbiamo usato sono ordinati sequenzialmente; il primissimo elenco appare in cima alla pila, mentre l'ultimo elencato apparirà in fondo alla pila dello sfondo.
#workspace width: 600px; altezza: 400 px; background-color: # 525d62; background-image: url (images / macbook.png), url (images / mouse.png), url (images / hdd.png), url (images / phone.png), url (images / ipad.png), url (images / coffee.png), url (images / camera.png); / * impilato in basso * / background-repeat: no-repeat;
Tutte le sotto-proprietà dello sfondo (background-repeat, background-size, background-position ecc.) può essere definito più volte, tranne colore di sfondo. Se applichiamo sfondi multipli usando la stenografia sfondo proprietà, definire il colore di sfondo come l'ultimo valore che ha effetto. Per esempio:
#workspace height: 400px; background: url (images / macbook.png) 50% 50% no-repeat, url (images / mouse.png) 430px 295px no-repeat, url (images / camera.png) 425px 230px no-repeat # 525d62;
In alternativa, aggiungi un altro colore di sfondo, successivo alla proprietà di mano breve:
#workspace width: 600px; altezza: 400 px; background: url (images / macbook.png) 50% 50% no-repeat, url (images / mouse.png) 430px 295px no-repeat, url (images / camera.png) 425px 230px senza ripetizione; background-color: # 525d62;
Entrambi questi codici fanno lo stesso, ma trovo che quest'ultimo sia più intuitivo e leggibile.
Il background-blend-mode fa lo stesso che troverai in applicazioni grafiche come Photoshop o Gimp; mescola le immagini di sfondo l'una all'altra, così come a qualsiasi cosa si trovi al di sotto.
Il background-blend-mode prende valori familiari come copertura e moltiplicare tra alcuni altri che Jonathan Cutrell fa un fantastico lavoro di spiegazione nel suo tutorial sull'argomento. Vi raccomando caldamente di leggerlo in modo da poter fare alcuni esempi pratici.
Esistono diversi modi per utilizzare la modalità di fusione CSS per creare disegni sorprendenti, come ad esempio miscelare un gradiente con un'immagine, che Ian Yates sottolinea nel suo riepilogo di ispirazione:
Per creare questo effetto, aggiungiamo un'immagine di sfondo e una sfumatura, e applichiamo il copertura modalità di fusione.
Accentsconagua
#blend background-repeat: no-repeat; background-image: url ('img / people-15.jpg'), gradiente lineare (135 gradi, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); background-blend-mode: overlay; La sovrapposizione influisce su entrambi gli sfondi elencati qui, quindi potrebbe essere necessario essere cauti se non si desidera che tutto si fonda insieme. Se vogliamo evitare tutto che si fonde con il colore di sfondo, imposta il secondo valore su normale che si applicherà alla nostra seconda immagine di sfondo.
#blend background-repeat: no-repeat; background-image: url ('/img/people-15.jpg'), gradiente lineare (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); colore di sfondo: giallo; background-blend-mode: overlay, normale; Il background-clip di property è un'utilità che controlla il modo in cui il colore di sfondo e l'estensione dell'immagine all'interno del modello di riquadro del contenuto CSS. Simile al box-sizing proprietà, il background-clip di proprietà prende tre valori validi, vale a dire:
border-box è il valore predefinito che copre l'immagine di sfondo o il colore fino al bordo esterno dell'elemento.padding-box coprirà lo sfondo fino al bordo esterno del padding, o in altre parole; il bordo interno del confine.contenuti-box conserverà lo sfondo all'interno del contenuto dell'elemento come mostrato di seguito:Un esempio pratico in cui ho trovato background-clip di essere a portata di mano è quando devo creare un pulsante con un'icona, usando un singolo elemento. Nella demo seguente, la nostra immagine si estende dal lato sinistro a quello destro dell'elemento, anche se aggiungiamo il padding su ciascun lato, poiché si applica ancora border-box.
Se vogliamo circondare l'icona con un po 'di spazio bianco, dovremmo tradizionalmente avvolgerlo con un altro elemento e applicare il riempimento su quell'elemento in più. Usando il background-clip di proprietà, siamo in grado di farlo elegantemente impostandolo contenuti-box, e sostituire l'imbottitura con bordi dello stesso colore del colore di sfondo.
Il sfondo la proprietà è quella che utilizziamo frequentemente nei nostri progetti. Speriamo che questo articolo ti abbia ricordato i suoi usi ampi e vari, e non vedo l'ora di sentire altre idee nei commenti.
Un'ultima nota: supporto del browser per queste proprietà (ad eccezione di background-blend-mode) sono grandi. Secondo CanIUse, più sfondi sono supportati da Internet Explorer 9 in poi, con solo un paio di problemi banali. Opzioni di immagine di sfondo, come ad esempio background-clip di proprietà, è quasi altrettanto buono.
Le modalità di fusione, al momento della scrittura, funzionano meglio in Chrome, Opera, sono parzialmente applicabili in Safari a causa di alcuni bug, ma purtroppo non sembrano aver fatto alcun segno di progresso con Microsoft Edge.
