Ciao, cari lettori del sito del blog. Oggi esamineremo cinque regole CSS che ti consentono di impostare lo sfondo per qualsiasi elemento in Html: posizione-sfondo (immagine, ripetizione, colore, allegato). Bene, non dimentichiamo di menzionare la regola del composto di sfondo.
Non c'è niente di difficile in questo, ma ci sono alcune sottigliezze e sfumature che devi conoscere e già modello pronto(ricorda, che ti aiuterà ad aprire tutti i dettagli di qualsiasi progetto).
Lascia che ti ricordi ancora una volta che questo articolo fa parte di una serie e sarebbe meglio iniziare a studiare il markup di stile dall'inizio, ovvero da un articolo su cos'è il CSS e con cosa viene mangiato, beh, quindi segui nell'ordine dato nel libro di 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 Colore HTML elementi utilizzando regole del colore CSS. In effetti, qui è tutto semplice. La sintassi è del tutto normale ed è possibile impostare il colore in base al modo in cui è stato eseguito nella lingua marcatura ipertestuale. Come ricorderete, posizionato dopo il segno cancelletto (cancelletto - "#fe35a3"), o con l'aiuto di tre cifre, se il primo corrisponde al valore del secondo, il terzo con il quarto, bene, e il quinto, rispettivamente, con il sesto (il codice colore "#aa33ff" può essere abbreviato in "a3f").
Inoltre, i colori nel codice Html e Css possono essere rappresentati come parole (ad esempio "rosso"), ma il più delle volte viene utilizzato il codice esadecimale:
Colore:#303
Ad esempio, ho colorato questo piccolo paragrafo dello stesso colore di cui sopra (#303). Ora è leggermente diverso dal colore di tutti gli altri paragrafi (più scuro), che è impostato su #555 nel file CSS che sto usando Temi 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 soddisfare cinque regole, che, se lo si desidera, possono essere combinate in un'unica squadra. Per vederli, puoi andare all'attuale pagina delle specifiche del W3C e cercare lì qualcosa con la parola Sfondo:
- colore di sfondo: questa regola imposta il colore di sfondo per qualsiasi elemento HTML. Puoi usare il codice o il nome dell'ombra in esso, ad es. tutto è esattamente come era quando si usa il colore.
immagine di sfondo - con essa, puoi utilizzare un'immagine come sfondo (ma assicurati di leggerla, perché le immagini pesanti rallenteranno il caricamento della pagina), il cui percorso sarà indicato nella funzionalità url().
Se guardi le specifiche, lo vedrai colore di sfondo predefinito qualsiasi elemento sarà trasparente (il valore predefinito della regola è "background-color:transparent"). È vero, negli elementi non sarà trasparente per impostazione predefinita, perché. questi sono elementi di sistema e tutto è diverso per loro e differisce dai normali tag del linguaggio di markup dell'ipertesto.
Il colore del colore di sfondo è impostato come standard (sei o tre cifre esadecimali o una parola):
Colore di sfondo:#FEFCDE
Ad esempio, lo sfondo di questo paragrafo è impostato proprio tramite background-color 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, posizionata esattamente. Quale file grafico verrà utilizzato può essere specificato utilizzando immagine di sfondo.
Se guardi la specifica del linguaggio di markup dello stile, vedrai che l'immagine di sfondo è impostata su "nessuno" (ovvero, non viene utilizzata alcuna immagine di sfondo). Bene, se ne hai ancora bisogno, nella funzionalità url() dovrai specificare il percorso:
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 poco sopra. Puoi vedere che l'intera area riservata a questo paragrafo è ricoperta da un'immagine ripetuta, che nell'originale si presenta così:
Quelli. quando si utilizza una sola regola dell'immagine di sfondo che specifica il percorso del file grafico, questa stessa immagine verrà riprodotta sia verticalmente che orizzontalmente fino a coprire l'intera area assegnata sulla pagina web per questo particolare elemento Html (nel nostro esempio, era un paragrafo). Perché sta succedendo?
Background-repeat - Ripeti l'immagine di sfondo
Sì, perché non abbiamo scritto alcun valore per la regola CSS sfondo ripetuto, il che significa che verrà utilizzato il valore predefinito. Osservando la specifica, scopriamo che questo valore corrisponde a "repeat" (ripetendo l'immagine in tutti gli assi). La risposta è arrivata da sola.
Pertanto, con la ripetizione in background possiamo gestire le ripetizioni delle immagini di sfondo. Questa regola può avere solo quattro valori:
Background-position - posizione dello sfondo
Ora sorge la domanda, è possibile spostare l'immagine di sfondo lontano da sinistra angolo superiore l'area di delimitazione dell'elemento. Certo che puoi, e per questo scopo esiste una regola separata posizione di sfondo:
Osservando la specifica CSS, diventa chiaro il motivo per cui l'immagine di sfondo predefinita viene premuta esattamente sul bordo superiore sinistro dell'area dell'elemento HTML. Perché il valore "0% 0%" è l'impostazione predefinita per la regola della posizione in background.
Ebbene, quando questa regola non è impostata in modo esplicito per l'elemento (come nel nostro caso), allora il browser seleziona il suo valore, che è accettato nella specifica di default (noto che gli assi delle coordinate nei CSS sono riportati proprio dal bordo in alto a sinistra dell'elemento area).
Si può anche vedere dalla specifica che sia i valori relativi (percentuali) che assoluti (ad esempio ) possono essere utilizzati per posizionare l'immagine di sfondo utilizzando la posizione dello sfondo. Bene, puoi anche usare parole che corrisponderanno a determinati valori digitali. Ma prima le cose principali.
Quando si imposta la posizione dell'immagine di sfondo usando le unità assolute background-position ha 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 all'origine di questa immagine stessa. Ad esempio, in questo paragrafo, ho posizionato l'immagine di sfondo tramite posizione di sfondo utilizzando le seguenti regole CSS:
Immagine di sfondo:url(https://website/image/logo.png); background-repeat:no-repeat; posizione di sfondo: 400px 25px;
Si prega di notare che in questo caso sarà allineato al centro del viewport, e non al centro dell'area riservata a questi paragrafi. È chiaro che in realtà è improbabile che venga utilizzato tale posizionamento di un'immagine di sfondo.
Tuttavia, se imposti una posizione di sfondo fissa per elementi come Body o Html (cioè in tag che coprono l'intera pagina web), allora questa immagine sarà sempre visibile nel viewport e questo è esattamente l'uso del CSS di sfondo-allegato immobile in moderno layout a blocchi.
Ce n'è ancora? Sfondo di regole prefabbricate, che consente di unire tutte e cinque le regole sopra descritte in un'unica bottiglia. Inoltre, i valori per tutti e cinque nella versione combinata possono essere utilizzati in qualsiasi ordine e in qualsiasi quantità (sono unici e il browser non li confonde tra loro). Tutto ciò che non specifichi in modo esplicito verrà considerato dal browser come valore predefinito.
Png) non ripetuta 50%;
La regola di montaggio mostrata nell'esempio è applicata a questo paragrafo per chiarezza. Non è andata bene, ma non è questo il punto. Questo paragrafo utilizza uno strano colore di sfondo giallo e utilizza un'immagine del logo LiveInternet allineata al centro del paragrafo. Perché per la regola di allegato in background, non viene impostato alcun valore, quindi viene utilizzato lo scorrimento (impostazione predefinita).
Se per qualche elemento vuoi impostare solo il riempimento con il colore e non preoccuparti dell'immagine di sfondo, puoi farlo invece:
Colore di sfondo:#FEFCDE
scrivere:
Sfondo: #FEFCDE
Per tutti gli altri valori della regola prefabbricata verrà preso di default, e questo è quello che ti serviva.
Buona fortuna a te! A presto sul sito delle pagine del blog
Potresti essere interessato
Stile elenco (tipo, immagine, posizione) - Regole CSS da personalizzare aspetto esteriore liste in codice html Come modificare il colore di sfondo delle righe di tabelle, elenchi e altri elementi Html sul sito utilizzando la pseudo-classe nth-child 
Posizione (assoluta, relativa e fissa) - modi per posizionare gli elementi HTML nei CSS (regole sinistra, destra, in alto e in basso) 
Fluttuante e chiaro nei CSS: strumenti di layout a blocchi 
Posizionamento con Z-index e regola del cursore CSS per cambiare il cursore del mouse 
Imbottitura, margine e bordo: inseriti css interno e margini, nonché bordi per tutti i lati (in alto, in basso, a sinistra, a destra) 
Display (block, none, inline) in CSS: imposta il tipo di visualizzazione degli elementi HTML su una pagina web 
Priorità in Css e loro aumento dovuto a Importante, combinazione e raggruppamento di selettori, stili utente e autore 
CSS: cos'è, come sono collegati i fogli di stile a cascata codice html con stile e collegamento 
Selettori di tag, classi, ID e universali, nonché selettori di attributi nei moderni CSS
breve informazione
versioni CSS
I valori
url Il percorso per il file grafico, che è specificato all'interno del costrutto url(). In questo caso, il percorso del file può essere scritto sia tra virgolette (doppie o singole), sia senza di esse. nessuno Annulla l'immagine di sfondo per l'elemento. inherit Eredita il valore del padre.HTML5 CSS2.1 IE Cr Op Sa Fx
Modello a oggetti
document.getElementById("elementID").style.backgroundImage
Browser
Internet Explorer fino alla versione 7.0 inclusa applica uno sfondo all'interno del bordo di un elemento con la proprietà hasLayout impostata. Se l'elemento non ha un hasLayout , la proprietà background-image rispetterà i bordi dell'elemento, come specificato nella specifica. La differenza nel rendering sarà evidente se i bordi sono tratteggiati (tratteggiati o punteggiati) anziché a tinta unita.
Se l'elemento è impostato su scroll o auto , Internet Explorer 8 avrà un ritardo verticale di un pixel durante lo scorrimento dello sfondo.
Internet Explorer fino alla versione 7.0 non supporta il valore ereditario.
Se lo sfondo è impostato per una riga di tabella (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Risultato questo esempio in browser Chrome mostrato in fig. uno. browser Internet Explorer, Opera e Firefox visualizzano correttamente lo sfondo della riga (Fig. 2).
Riso. 1. Ripeti 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 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 (completamente Sfondo 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 una sorta di livello, in modo che ciascuna successiva si sovrapponga alla precedente. Perché potrebbe essere utile? Tutto è abbastanza semplice: diciamo che devi avvitare piccole cose in ciascuno degli angoli del sito. In condizioni di layout più o meno fluido, 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:
- impostare un colore di sfondo contrastante nel caso in cui l'utente non veda l'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à.
Inserisci le parole chiave.