Ciao cari lettori del sito blog. Oggi esamineremo cinque regole CSS che ti consentono di impostare uno sfondo per qualsiasi elemento in Html - posizione di sfondo (immagine, ripetizione, colore, allegato). Bene, non dimentichiamo di menzionare anche la regola del composto di sfondo.

Non c'è niente di difficile in questo, ma ci sono alcune sottigliezze e sfumature che devi conoscere su un modello già pronto (ricorda, che ti aiuterà ad aprire tutti i dettagli di qualsiasi design).

Permettetemi di ricordarvi ancora una volta che questo articolo fa parte di una serie e sarebbe meglio iniziare prima ad imparare il markup di stile, cioè con un articolo su cos'è il CSS e con cosa si mangia, beh, e poi seguire nell'ordine dato nel riferimento. Anche se, in ogni caso, dipende da te, ma ora parliamo di impostare lo sfondo.

Colore, colore di sfondo e immagine di sfondo

Vediamo prima come viene impostato il colore degli elementi HTML usando Regole dei colori CSS... In effetti, tutto è semplice qui. La sintassi è del tutto normale e puoi impostare il colore in base a come è stato fatto nel linguaggio di markup ipertestuale. Come ricordi, posto dopo il segno di cancelletto (hash - "# fe35a3"), o usando tre cifre, se il primo corrisponde al valore del secondo, il terzo con il quarto, beh, e il quinto, rispettivamente, con il sesto (il codice colore "# aa33ff" può essere abbreviato come "a3f").

Inoltre, i colori nel codice Html e Css possono essere rappresentati come parole (ad esempio "rosso"), ma il codice esadecimale è più spesso utilizzato:

Colore: #303

Ad esempio, ho colorato questo piccolo paragrafo dello stesso colore di sopra (# 303). Ora è leggermente diverso dal colore di tutti gli altri paragrafi (più scuro), che è impostato come # 555 nel file CSS del mio tema WordPress. Ma impostare il colore attraverso il colore è abbastanza semplice, ma con lo sfondo sarà un po' più complicato.

Così, per lo sfondo in css ci sono cinque regole che, se lo si desidera, possono essere combinate in un'unica squadra. Per vederli, puoi andare alla pagina delle attuali specifiche del consorzio W3C e cercare lì qualsiasi cosa con la parola Background:

1. colore di sfondo: questa regola imposta il colore di sfondo per qualsiasi elemento HTML. In esso, puoi utilizzare il codice o il nome dell'ombra, ad es. tutto è esattamente com'era quando si usava il colore.

immagine di sfondo - con essa puoi usare un'immagine come sfondo (ma assicurati di leggerlo, perché le immagini pesanti rallenteranno il caricamento della pagina), il percorso a cui sarà specificato nella funzionalità url ().

Se guardi le specifiche, vedrai che colore di sfondo predefinito qualsiasi elemento avrà trasparente (il valore predefinito della regola è "colore di sfondo: trasparente"). Tuttavia, negli elementi non sarà trasparente per impostazione predefinita, poiché questi sono elementi di sistema e hanno tutto in modo diverso e diverso dai soliti tag del linguaggio di markup ipertestuale.

Il colore in background-color è impostato come standard (sei o tre cifre di un codice esadecimale, o una parola):

Colore di sfondo: #FEFCDE

Ad esempio, lo sfondo di questo paragrafo viene impostato proprio attraverso il colore di sfondo con il codice colore riportato appena sopra.

Tutte le altre quattro regole CSS si applicheranno solo all'immagine di sfondo, che può essere impostata per qualsiasi elemento Html e, se lo si desidera, può essere posizionata con precisione. Quale file grafico verrà utilizzato può essere impostato utilizzando immagine di sfondo.

Se guardi le specifiche del linguaggio di markup dello stile, vedrai che l'immagine di sfondo predefinita è "none" (cioè non viene utilizzata alcuna immagine di sfondo). Bene, se ne hai ancora bisogno, nell'url() funzionale devi specificare il percorso ad esso:

Immagine di sfondo: url (https: //site/image/comment_top_focus.gif);

Ad esempio, per questo paragrafo ho utilizzato un file grafico con uno sfondo, il cui percorso è descritto appena sopra. Puoi vedere che l'intera area assegnata a questo paragrafo è coperta da un'immagine ripetuta, che nell'originale ha questo aspetto:

Quelli. quando si utilizza una sola regola dell'immagine di sfondo che indica il percorso del file grafico, questa stessa immagine verrà moltiplicata sia verticalmente che orizzontalmente fino a coprire l'intera area assegnata nella pagina Web per questo particolare elemento Html (nel nostro esempio, era un paragrafo). Perché sta succedendo?

Ripeti sfondo - ripeti l'immagine di sfondo

Sì, perché non abbiamo scritto alcun valore per la regola CSS. sfondo-ripetizione, il che significa che verrà utilizzato il valore predefinito. Guardando la specifica, scopriamo che questo valore corrisponde a "repeat" (ripetendo l'immagine lungo tutti gli assi). La risposta è arrivata da sola.

Pertanto, con la ripetizione in background possiamo gestire le ripetizioni dell'immagine di sfondo... Questa regola può avere solo quattro valori:




Posizione dello sfondo - posizionamento dello sfondo

Ora sorge la domanda, è possibile spostare l'immagine di sfondo dall'angolo in alto a sinistra dell'area che limita la dimensione dell'elemento. Certo che puoi, e a questo scopo esiste una regola a parte posizione di sfondo:



Osservando le specifiche CSS, diventa chiaro il motivo per cui l'immagine di sfondo predefinita è annidata esattamente sul bordo superiore sinistro dell'area dell'elemento Html. Perché il valore "0% 0%" è il valore predefinito per la regola della posizione in background.

Bene, quando questa regola non è specificata esplicitamente per un elemento (come nel nostro caso), allora il browser seleziona il valore che è accettato nella specifica per impostazione predefinita (nota che gli assi delle coordinate in CSS sono riportati solo dal bordo superiore sinistro di l'elemento area).

Si può anche vedere dalla specifica che sia i valori relativi (percentuale) che assoluti (ad esempio) possono essere utilizzati per posizionare l'immagine di sfondo usando background-position. Bene, puoi anche usare parole che corrisponderanno a determinati valori numerici. Ma prima le cose principali.

Quando si imposta il posizionamento dell'immagine di sfondo usando unità assolute nella posizione di fondo, si applica il seguente principio per determinare la sua posizione finale:

Quelli. il browser calcolerà gli offset specificati lungo gli assi X e Y dall'origine dell'area in cui è posizionato l'oggetto fino all'origine di questa stessa immagine. Ad esempio, in questo paragrafo, ho posizionato l'immagine di sfondo in termini di posizione dello sfondo utilizzando le seguenti regole CSS:

Immagine di sfondo: url (https: //site/image/logo.png); background-repeat: no-repeat; posizione di sfondo: 400px 25px;

Si noti che in questo caso sarà allineato al centro della finestra e non al centro dell'area assegnata a questi paragrafi. È chiaro che in realtà è improbabile che una tale disposizione dell'immagine di sfondo trovi applicazione.

Tuttavia, se imposti una posizione di sfondo fissa per elementi come Body o Html (cioè nei tag che coprono l'intera pagina web), allora questa immagine sarà sempre visibile nel viewport, e questo è esattamente ciò che la proprietà CSS dell'allegato di sfondo trova nella moderna disposizione a blocchi.

C'è qualcos'altro? regola prefabbricata Sfondo, che consente di combinare tutte e cinque le regole sopra descritte in un'unica bottiglia. Inoltre, i valori per tutti e cinque nella versione prefabbricata possono essere utilizzati in qualsiasi ordine e in qualsiasi quantità (sono univoci e il browser non li confonderà tra loro). Tutto ciò che non specifichi esplicitamente, il browser considererà uguale al valore predefinito.

Png) non ripetibile 50%;

La regola di montaggio mostrata nell'esempio viene applicata a questo paragrafo per chiarezza. Si è rivelato non bello, ma questa non è la cosa principale. Per questo paragrafo viene utilizzato uno strano riempimento di sfondo giallo e un'immagine del logo LiveInternet, allineato al centro del paragrafo. Perché non viene specificato alcun valore per la regola di collegamento in background, quindi viene utilizzato il valore di scorrimento predefinito.

Se per qualche elemento vuoi impostare solo un riempimento con il colore e non preoccuparti dell'immagine di sfondo, allora potresti benissimo invece di:

Colore di sfondo: #FEFCDE

scrivere:

Sfondo: #FEFCDE

Per tutti gli altri valori la regola combinata verrà presa per impostazione predefinita, e questo è ciò di cui avevi bisogno.

Buona fortuna a te! A presto sulle pagine del sito blog

puoi guardare più video andando su

");">


Potresti essere interessato

Stile elenco (tipo, immagine, posizione) - Regole CSS per personalizzare l'aspetto degli elenchi nel codice Html Come impostare il colore di sfondo alternato di righe di tabelle, elenchi e altri elementi Html su un sito utilizzando la pseudo-classe nth-child
Posizione (assoluta, relativa e fissa) - modalità di posizionamento degli elementi HTML nei CSS (regole sinistra, destra, alto e basso)
Fluttua e cancella in CSS - strumenti di layout a blocchi
Posizionamento con Z-index e regola del cursore CSS per cambiare il cursore del mouse

Con aiuto Colore e sfondo CSS puoi impostare quasi tutti gli elementi di una pagina web, controllare liberamente l'immagine di sfondo, la sua ripetizione orizzontalmente e verticalmente. Inoltre, utilizzando i CSS, puoi posizionare un'immagine di sfondo in qualsiasi punto dello schermo utilizzando il posizionamento. Non corriamo ancora troppo lontano, andiamo con ordine.

Proprietà COLOR

Questa proprietà imposta il colore dell'elemento, in particolare il colore del testo all'interno dell'elemento. Il valore è specificato in una delle forme possibili:

• nome del colore (VERDE, NERO, ROSSO...);
• codice colore esadecimale (008000, 000000, FF0000 ...);
• codice colore decimale in RGB (colore: rgb (40, 175, 250));

La proprietà COLOR viene ereditata e, se non viene specificato un valore per alcun elemento, il valore verrà ereditato dal suo predecessore. Ma potrebbe risultare che non è specificato neanche per l'antenato, quindi il foglio di stile del browser verrà applicato utilizzando i valori predefiniti. Il colore dell'elemento in questo caso sarà molto probabilmente il nero.

Come ho già detto, puoi impostare il colore per quasi tutti gli elementi, può essere (H1 ... H6), (strong, em) e persino interi (p) e persino i bordi della tabella, ma ne parleremo più avanti.

Vediamo un esempio di impostazione del colore del testo utilizzando i CSS:

h1 (colore: blu)

In questo esempio, tutte le intestazioni del primo livello della pagina web saranno blu:

forte (colore: rosso)

In questo caso, tutto ciò che è nel testo della pagina verrà evidenziato con un tag forte, diventerà rosso.

Si può scrivere così:

h1, p, forte (colore: verde)

Quindi i titoli di primo livello, tutti i paragrafi e tutto ciò che è evidenziato dal tag saranno di colore verde.

Quando diventa necessario evidenziare i titoli con colori diversi, vengono utilizzati i selettori di classe. Per definire una classe in HTML, usa l'attributo classe che può essere applicato a qualsiasi elemento. Nel codice HTML, dovrai scrivere:

class = "Blu"> Il colore delle intestazioni di questa classe sarà blu

Nel foglio di stile CSS, in questo caso, scriviamo una regola dove il selettore sarà l'elemento H1, e attraverso il punto ( . ) nome della classe:

h1.Blu (colore: blu)

Nei documenti HTML vengono utilizzati anche i selettori di identificatori, determinati dall'attributo ID... L'identificatore è più significativo o prioritario rispetto alla classe. E se sia la classe che l'identificatore sono specificati nel codice HTML per l'elemento, verrà applicato lo stile dell'identificatore. L'identificatore è indicato dal cancelletto ( # ). Per utilizzare l'identificatore nel codice HTML, dovrai scrivere:

id = "Blu"> Il colore delle intestazioni di questo ID sarà blu

Nel foglio di stile, a sua volta:

h1 # Blu (colore: blu)

SFONDO-COLORE Proprietà

Questa proprietà consente di impostare il colore di sfondo per l'intera pagina, paragrafo, collegamento, in generale, per qualsiasi elemento HTML. Per fare ciò, nel valore della proprietà viene specificato un colore o un valore. trasparente(trasparente). Il codice per lo sfondo della pagina è scritto:

corpo (colore di sfondo: acqua)

In questo caso lo sfondo della pagina sarà turchese, e per dare lo sfondo al titolo scrivi:

h1 (colore di sfondo: giallo)

Otteniamo lo sfondo giallo delle intestazioni di primo livello.

Colore e sfondo CSS

Proprietà BACKGROUND-REPEAT

Questa proprietà viene utilizzata quando data per determinare se si ripete orizzontalmente e verticalmente. Valori validi:

• ripetere- l'immagine viene ripetuta verticalmente e orizzontalmente;
• ripeti-x- l'immagine viene ripetuta solo orizzontalmente;
• ripeti-y- l'immagine viene ripetuta solo in verticale;
• nessuna ripetizione- l'immagine non viene ripetuta.

Il codice è scritto così:

P (
immagine di sfondo: url ( indirizzo file immagine) ;
background-repeat: repeat-x
}

Il testo di questo paragrafo sarà sopra l'immagine di sfondo, che sarà posizionata orizzontalmente.

SFONDO-ALLEGATO Proprietà

Questa proprietà è usata per dire al browser se l'immagine di sfondo della pagina deve scorrere con il testo ( scorrere) o rimanere immobile ( fisso).

corpo (
immagine di sfondo: url ( indirizzo file immagine) ;
background-repeat: repeat-x;
sfondo-attaccamento: fisso
}

In questo caso, l'immagine di sfondo rimarrà stazionaria.

POSIZIONE DI SFONDO Proprietà

Questa proprietà viene utilizzata per posizionare l'immagine rispetto a. I valori sono specificati in percentuale (%), in unità di lunghezza (cm, px), per parole chiave:

• Verticalmente:
• superiore- la parte superiore dell'immagine è allineata con il bordo superiore della pagina o del blocco;
• centro
• metter il fondo a- la parte inferiore dell'immagine è allineata con il bordo inferiore della pagina o del blocco.
• Orizzontalmente:
• sinistra- il bordo sinistro dell'immagine è allineato con il bordo sinistro della pagina o del blocco;
• centro- il centro dell'immagine è allineato al centro della pagina o del blocco;
• Giusto- il bordo destro dell'immagine è allineato con il bordo destro della pagina o del blocco.

Scriviamo un codice di esempio in percentuali, unità di lunghezza e parole chiave:

corpo (
immagine di sfondo: url ( indirizzo file immagine) ;
posizione di fondo: 0% 0%
}

Corpo (
immagine di sfondo: url ( indirizzo file immagine) ;
posizione di sfondo: 10px 25cm
}

Corpo (
immagine di sfondo: url ( indirizzo file immagine) ;
posizione di sfondo: in alto al centro
}

Una delle attività più comuni durante la modifica di testo e blocchi in HTML e CSS. Può essere riscontrato non solo dal progettista del layout, ma anche da qualsiasi gestore di contenuti che modifica il contenuto del sito. Per risolvere questo problema, vengono utilizzate solo due proprietà: colore: il colore del testo, sfondo: lavora con lo sfondo, il colore o l'immagine.

Lavorare con Prova Colore in CSS

coloreè una proprietà necessaria per specificare un colore solo per il testo. Il colore può essere specificato sia in formato codice HTML HEX che in formato RGB (Red Green Blue). I codici colore possono essere selezionati sia in programmi di grafica come Photoshop o online

Sintassi della proprietà:

Colore: Colore;
Ora applichiamo la proprietà:

Contenuto (
colore: # 444; // testo grigio scuro in un elemento con contenuto di classe
}
Perché un esempio del genere: specificare un colore per un collegamento e per il testo sono due cose diverse. Ricorda. Bene, da solo consiglio di rendere il colore del testo e dei collegamenti di diversi colori.

Lavorare con lo sfondo in CSS

sfondoè una proprietà che consente di lavorare con lo sfondo di un'immagine: impostare il colore di sfondo, impostare un'immagine come sfondo (formati jpg, gif, png), modificare la posizione dello sfondo e altri parametri, descritti di seguito.

colore di sfondo- questa proprietà viene utilizzata solo per impostare il colore di sfondo. Accetta solo il codice colore. Il colore può essere specificato in formato RGB (Red Green Blue) o in formato codice HTML HEX.

Blocco (
colore di sfondo: # fbb5b5; // imposta un colore scarlatto pastello per lo sfondo
}
I migliori esempi di colori per lo sfondo (modelli di design moderno: Flat Design, ecc.):

immagine di sfondoè una proprietà che viene utilizzata per impostare un'immagine come sfondo in un elemento. Per specificare l'immagine sono sufficienti il ​​parametro url e il percorso dell'immagine relativo al file con stili css.

#indietro (
background-image: url ("images / fon.jpg");
}

sfondo-ripetizione- può essere utilizzato solo quando la proprietà background-image è stata specificata sopra. Questa proprietà imposta la regola di ripetizione dell'immagine. Per impostazione predefinita, l'immagine si ripete sull'asse X e sull'asse Y fino ai bordi dell'elemento (se lo sfondo è più piccolo dell'elemento). Nella proprietà, puoi specificare l'impostazione in modo che le immagini vengano ripetute solo lungo l'asse X - ripeti-x (orizzontale), solo lungo la Y - ripeti-y (verticale), o per niente - nessuna ripetizione.

#contenuto (

background-repeat: repeat-x; / * l'immagine si ripeterà solo orizzontalmente fino ai limiti del blocco * /
}

sfondo-attaccamento- fissa lo sfondo in una posizione, ovvero l'immagine scorrerà insieme al contenuto del blocco o rimarrà fissa. L'impostazione predefinita è scorrimento, che non fissa la posizione dello sfondo.

#contenuto (
background-image: url ("background.jpg");
background-repeat: repeat-x; / * l'immagine si ripeterà solo orizzontalmente * /
attaccamento allo sfondo: fisso; / * bloccato alla posizione * /
}

posizione di sfondo- una proprietà che imposta la posizione dello sfondo nell'elemento. Vengono dati due valori: la posizione orizzontale e poi la posizione verticale. È impostato in digitale (pixel e percentuali) o in lettere (sinistra, centro, destra, alto, basso). Questa proprietà è necessaria quando l'immagine non è ripetuta (no-repeat) e lo sfondo deve essere posizionato nell'elemento in un certo modo.

#blocco (
posizione di sfondo: centro sinistra; / * orizzontalmente - sul lato sinistro, verticalmente - al centro * /
}
Penso che sia tutto chiaro nei commenti)
Un esempio di scrittura di un valore numerico:

#tasti (
posizione di sfondo: 109px 57px; / * margine sinistro 109px, 57px in alto * /
}
Anche qui penso che tutto dovrebbe essere chiaro.
Molte proprietà? Vedi come scrivere in forma abbreviata.

Infine. Scorciatoia CSS per lo sfondo

È possibile utilizzare una notazione abbreviata, in cui tutti i parametri verranno specificati in una riga:

Sfondo: immagine a colori ripetere la posizione di attaccamento;

A proposito di professionisti. Scrivere in questo modo ridurrà i tempi di caricamento della pagina e il rendering del browser. Abbi pietà dei visitatori, è meglio scrivere in questo modo, se, ovviamente, hai bisogno di diverse proprietà.
Sì, puoi saltare qualsiasi proprietà se non ce n'è bisogno! Continui a specificare i valori più in basso nell'elenco.

Blocco (
sfondo: # f1f1f1 url ("background.jpg") repeat-x scroll 100px 125px;
}

Un esempio di come funzionano gli sfondi nei CSS

Codice di esempio. Potete vedere il risultato del lavoro e il codice sorgente al link sottostante.

Nel caso di un'immagine di sfondo, è meglio specificare la dimensione del blocco, altrimenti verrà ridimensionato in base al contenuto.

brevi informazioni

Versioni CSS

I valori

url Il valore è il percorso del file grafico, che è specificato all'interno della costruzione url(). In questo caso, il percorso del file può essere scritto tra virgolette (doppie o singole) o senza di esse. none Annulla l'immagine di sfondo per l'elemento. inherit Eredita il valore dal genitore.

HTML5 CSS2.1 IE Cr Op Sa Fx

Modello oggetto

document.getElementById ("elementID") .style.backgroundImage

Browser

Internet Explorer 7.0 o versione successiva applica uno sfondo all'interno del bordo di un elemento con la proprietà hasLayout impostata. Se un elemento non ha un hasLayout, la proprietà background-image rispetterà i bordi dell'elemento come specificato nelle specifiche. La differenza nella visualizzazione sarà evidente se i bordi sono tratteggiati o punteggiati anziché solidi.

Se l'elemento è impostato su scorrimento o automatico, Internet Explorer 8 avrà un ritardo verticale di un pixel quando lo sfondo scorre.

Internet Explorer fino alla versione 7.0 inclusa non supporta il valore di ereditarietà.

Se lo sfondoèimpostato per una riga della tabella (tag ), quindi Chrome, Safari, iOS non lo visualizzano come prescritto dalla specifica, ovvero per ogni cella separatamente. Considerando che il browser dovrebbe mostrare uno sfondo solido per l'intera riga. L'esempio 2 mostra il codice per dimostrare l'errore.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Il risultato di questo esempio nel browser Chrome è mostrato in Fig. 1. Browser Internet Explorer, Opera e Firefox visualizzano correttamente lo sfondo della linea (Fig. 2).

Riso. 1. Ripetere lo sfondo per ogni cella

Riso. 2. Sfondo per l'intera linea

Penso che non ci sia un solo sito in cui la proprietà non viene utilizzata Sfondo CSS... Sembrerebbe che cosa potrebbe essere più semplice di questa proprietà? Ma no, le sue capacità sono molto più ampie del solito scopo di un'immagine o di un colore come sfondo della pagina. Qualcosa sarà familiare, ma qualcosa diventerà sicuramente una novità per molti. In ogni caso, sarà utile conoscere a fondo come funziona il background.

I CSS3 hanno apportato molte novità alla proprietà, questa è la trasparenza e l'assegnazione di più immagini come sfondo, ma ne parleremo di seguito e prima esamineremo le basi della proprietà. sfondo.

colore di sfondo

Sono abbastanza sicuro che tu abbia eseguito le assegnazioni del colore di sfondo un certo numero di volte. Questo può essere fatto utilizzando diversi tipi di notazione: regolare (viene utilizzato il nome del colore), esadecimale o notazione RGB. Ogni tipo è uguale, usa quello che preferisci. Cerco di utilizzare la versione più breve e, per motivi di percezione, è più semplice e il file di stile è di dimensioni leggermente inferiori.

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

C'è il supporto per la trasparenza in CSS3, quindi puoi aggiungerlo al nostro colore, ad esempio:

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

L'ultima cifra è stata impostata sul 50% di trasparenza. È possibile impostare il valore di trasparenza da 0 (sfondo completamente trasparente) a 1 (completamente opaco).

immagine di sfondo

Questa proprietà è anche usata molto spesso, ti permette di assegnare un'immagine allo sfondo. CSS3 aggiunge la possibilità di assegnare più immagini allo sfondo, ognuna creando una sorta di livello, in modo che ogni successiva venga sovrapposta alla precedente. Perché questo potrebbe essere utile? Tutto è abbastanza semplice: diciamo che devi allacciare le piccole cose in ogni angolo del sito. A condizione che il layout sia più o meno fluido, l'utilizzo di un'immagine non è un'opzione. Pertanto, creiamo 4 "livelli", spostiamo ogni immagine nel suo angolo e basta, 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 sia comprensibile.
Quando si utilizza un'immagine come sfondo, ci sono due regole da tenere a mente:

• impostare un colore di sfondo contrastante nel caso in cui l'utente non possa visualizzare un'immagine per qualche motivo. Può disattivare la visualizzazione di immagini banali, salva il traffico.
• non utilizzare un'immagine di sfondo per trasmettere informazioni importanti. Per il motivo sopra indicato, l'utente potrebbe non vederlo.

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