Imposta un'immagine di sfondo in CSS. Sfondo in CSS (colore, posizione, immagine, ripetizione, allegato): tutto per impostare il colore di sfondo o l'immagine di sfondo degli elementi Html. È possibile utilizzare HTML per impostare lo sfondo?
Penso che non ci sia un singolo sito in cui la proprietà non viene utilizzata Sfondo CSS. Sembrerebbe che cosa potrebbe esserci di più semplice di questa proprietà? Ma no, le sue capacità sono molto più ampie della solita assegnazione di un'immagine o di un colore come sfondo della pagina. Alcune cose risulteranno familiari, mentre altre saranno probabilmente nuove per molti. In ogni caso sarà utile conoscere a fondo come funziona lo sfondo.
CSS3 ha apportato molte novità alla proprietà, come la trasparenza e l'assegnazione di diverse immagini come sfondo, ma di questo parleremo più avanti, ma prima vedremo le basi della proprietà sfondo.
colore di sfondo
Sono più che sicuro che tu abbia già assegnato il colore di sfondo più di una volta. Questo può essere fatto utilizzando diversi tipi di notazione: normale (viene utilizzato il nome del colore), esadecimale o RGB. Ogni tipo è equivalente, usa quello che preferisci. Cerco di utilizzare l'opzione più breve e, per facilitare la percezione, il file di stile risultante è leggermente più piccolo.
P (colore di sfondo: rosso;) p (colore di sfondo: #f00;) p (colore di sfondo: #ff0000;) p (colore di sfondo: rgb(255, 0, 0;))
CSS3 supporta la trasparenza, quindi possiamo aggiungerla al nostro colore, ad esempio 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 di trasparenza da 0 (completamente Sfondo trasparente) a 1 (completamente opaco).
immagine di sfondo
Anche questa proprietà viene utilizzata molto spesso e permette di assegnare un'immagine allo sfondo; CSS3 ha aggiunto la possibilità di assegnare più immagini allo sfondo, ognuna creando il proprio livello, in modo che ciascuna successiva si sovrapponga a quella precedente. Perché potrebbe essere utile? Tutto è abbastanza semplice: diciamo che devi avvitare piccoli fronzoli in ogni angolo del sito. Dato un layout più o meno gommoso, l'utilizzo di un'immagine non è un'opzione. Quindi creiamo 4 “strati”, spostiamo ogni immagine nel suo angolo e basta, il problema è risolto
Corpo (immagine di sfondo: url("immagine1"), url("immagine2"), url("immagine3"))
Se devi assegnare un'immagine allo sfondo, lasciamo solo la prima nel codice, penso che sia comprensibile.
Quando usi qualsiasi immagine come sfondo, dovresti ricordare due regole:
- impostare un colore di sfondo contrastante nel caso in cui l'utente non veda l'immagine per qualche motivo. Può semplicemente disattivare la visualizzazione delle immagini, risparmiando traffico.
- non utilizzare un'immagine di sfondo per trasmetterne alcuna Informazioni importanti. Per i motivi sopra indicati l'utente potrebbe non visualizzarlo.
Il supporto per più immagini di sfondo è piuttosto ampio. Tutti i browser, anche IE8, supportano questa proprietà.
Ciao, cari lettori del sito blog. Oggi esamineremo cinque regole CSS che ti consentono di impostare uno sfondo per qualsiasi elemento in Html: posizione dello sfondo (immagine, ripetizione, colore, allegato). Bene, non dimentichiamoci anche della regola del composto di sfondo.
Non c'è nulla di complicato in questo, ma ci sono alcune sottigliezze e sfumature che devi già conoscere modello già pronto(ricordalo, che ti aiuterà a rivelare tutti i dettagli di qualsiasi progetto).
Permettetemi di ricordarvi ancora una volta che questo articolo fa parte di una serie e sarebbe meglio iniziare a studiare il markup di stile dall'inizio, cioè con un articolo su cosa sono i CSS e a cosa servono, e poi seguire nell'ordine indicato nel libro di consultazione. Anche se, in ogni caso, dipende da te, ma ora parliamo dell'impostazione dello sfondo.
Colore, colore di sfondo e immagine di sfondo
Diamo prima un'occhiata a come viene impostato il colore Elementi HTML usando Regole colore CSS. In effetti, qui tutto è semplice. La sintassi è del tutto normale ed è possibile impostare il colore in base a come è stato fatto nel linguaggio di markup ipertestuale. Come ricordi, posto dopo il segno del cancelletto (cancelletto - “#fe35a3”), o utilizzando tre cifre, se la prima coincide con il valore del secondo, la terza con il quarto e la quinta, rispettivamente, con il sesto ( il codice colore "#aa33ff" può essere scritto brevemente come "a3f").
Anche i colori in Html e Codice CSS può essere rappresentato come parole (ad esempio "rosso"), ma molto spesso viene utilizzato il codice esadecimale:
Colore:#303
Ad esempio, ho colorato questo piccolo paragrafo con lo stesso colore di cui sopra (#303). Ora è leggermente diverso dal colore di tutti gli altri paragrafi (più scuro), che è impostato su #555 in File CSS Tema WordPress che utilizzo. Ma impostare il colore usando il colore è abbastanza semplice, ma con lo sfondo sarà un po' più complicato.
COSÌ, per lo sfondo in Css Ci sono cinque regole che possono essere combinate in una se lo si desidera. Per vederli, puoi andare all'attuale pagina delle specifiche W3C e cercare qualsiasi cosa con la parola Background:
- colore di sfondo: utilizzando questa regola, imposti il colore di sfondo per qualsiasi elemento Html. Puoi utilizzare un codice o il nome del paralume, ad es. tutto è esattamente uguale a quando si utilizzava il colore.
immagine di sfondo: con esso puoi utilizzare un'immagine come sfondo (ma assicurati di leggerla, perché le immagini pesanti rallenteranno il caricamento delle pagine), il cui percorso verrà 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 ciò che li riguarda è diverso e diverso dai normali tag del linguaggio di markup ipertestuale.
Il colore in background-color è impostato come standard (sei o tre cifre del codice esadecimale o una parola):
Colore di sfondo:#FEFCDE
Ad esempio, lo sfondo di questo paragrafo viene specificato utilizzando background-color con il codice colore fornito appena sopra.
Tutte le altre quattro regole CSS avranno effetto solo immagine di sfondo, che può essere impostato per qualsiasi elemento Html e, se lo si desidera, posizionato con precisione. Quale file grafico verrà utilizzato può essere specificato utilizzando immagine di sfondo.
Se guardi le specifiche del linguaggio di markup, vedrai che background-image per impostazione predefinita è "none" (ovvero, nessuna immagine viene utilizzata per lo sfondo). Bene, se ne hai ancora bisogno, nella funzionalità url() dovrai indicarne 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. Vedi che l'intera area assegnata a questo paragrafo è coperta da un'immagine ripetuta, che nell'originale assomiglia a questa:
Quelli. utilizzando 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 tutta l'area allocata nella pagina web per questo specifico elemento Html (nel nostro esempio era un paragrafo). Perché sta succedendo?
Ripetizione dello sfondo: ripete l'immagine di sfondo
Sì, perché non abbiamo specificato alcun valore per la regola CSS ripetizione dello sfondo, il che significa che verrà utilizzato il valore predefinito. Osservando le specifiche, scopriamo che questo valore corrisponde a “ripeti” (ripeti l'immagine su tutti gli assi). La risposta è arrivata naturale.
Pertanto, con la ripetizione dello sfondo possiamo gestire le ripetizioni delle immagini di sfondo. Questa regola può avere solo quattro significati:
Posizione dello sfondo - posizionamento dello sfondo
Ora sorge la domanda: è possibile spostare l'immagine di sfondo lontano dall'angolo in alto a sinistra dell'area che limita la dimensione dell'elemento. Certo che puoi, e c'è una regola separata per questo scopo. posizione dello sfondo:
Osservando le specifiche CSS diventa chiaro il motivo per cui l'immagine di sfondo viene premuta per impostazione predefinita esattamente sul bordo superiore sinistro Aree HTML elemento. Perché il valore "0% 0%" è il valore predefinito per la regola di posizione in background.
Ebbene, quando questa regola non è impostata esplicitamente per un elemento (come nel nostro caso), allora il browser ne seleziona il valore, che è accettato nella specifica per impostazione predefinita (nota che gli assi delle coordinate nei CSS sono riportati esattamente dal bordo superiore sinistro dell'elemento area).
È inoltre chiaro dalle specifiche che per posizionare l'immagine di sfondo utilizzando background-position è possibile utilizzare sia valori relativi (percentuali) che valori assoluti (ad esempio ). Bene, puoi anche usare parole che corrisponderanno a determinati valori digitali. Ma prima le cose principali.
Quando si imposta il posizionamento dell'immagine di sfondo utilizzando unità assolute nella posizione di sfondo viene utilizzato 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 background position utilizzando le seguenti regole CSS:
Immagine di sfondo:url(https://site/image/logo.svg?1); ripetizione in background: nessuna ripetizione; posizione dello sfondo: 400px 25px;
Tieni presente che in questo caso sarà allineato al centro dell'area di visualizzazione e non al centro dell'area assegnata a questi paragrafi. È chiaro che in realtà è improbabile che tale posizionamento di un'immagine di sfondo venga utilizzato.
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 nell'area di visualizzazione ed è esattamente ciò che viene utilizzato Proprietà CSS allegato in background nel moderno layout a blocchi.
Ce n'è dell'altro? regola prefabbricata Sfondo, che ti consente di combinare tutte e cinque le regole sopra descritte in un'unica bottiglia. Inoltre, i valori di tutti e cinque nella versione combinata possono essere utilizzati in qualsiasi ordine e in qualsiasi quantità (sono unici e il browser non li confonderà tra loro). Tutto ciò che non specifichi esplicitamente verrà considerato dal browser come valore predefinito.
Png) nessuna ripetizione 50%;
La regola prefabbricata di esempio viene applicata a questo paragrafo per chiarezza. Non è andata bene, ma non è questa la cosa principale. Questo paragrafo utilizza uno strano riempimento di sfondo giallo e utilizza anche un'immagine del logo di Liveinternet, allineata al centro del paragrafo. Perché Se alla regola di collegamento in background non viene assegnato alcun valore, viene utilizzato il valore di scorrimento (predefinito).
Se per qualche elemento vuoi impostare solo un riempimento colore e non preoccuparti di un'immagine di sfondo, puoi invece farlo:
Colore di sfondo:#FEFCDE
scrivere:
Contesto:#FEFCDE
Perché tutti gli altri valori della regola prefabbricata verranno adottati per impostazione predefinita, ed è ciò di cui avevi bisogno.
Buona fortuna a te! A presto sulle pagine del blog del sito
Potresti essere interessato
Stile elenco (tipologia, immagine, posizione) - Regole Css per personalizzare l'aspetto delle liste nel codice Html Come configurare il colore di sfondo alternato di righe di tabelle, liste 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, superiore e inferiore) 
Galleggia e cancella negli strumenti CSS disposizione dei blocchi
Posizionamento utilizzando l'indice Z e la regola del cursore CSS per modificare il cursore del mouse 
Imbottitura, margine e bordo: inseriti interno CSS e margini esterni, nonché cornici per tutti i lati (superiore, inferiore, sinistro, destro) 
Visualizza (blocco, nessuno, in linea) in CSS: imposta il tipo di visualizzazione degli elementi Html sulla pagina web 
Priorità in Css e loro aumento dovuto a Importante, combinazione e raggruppamento di selettori, stili utente e autore 
CSS: cos'è e come si connettono i fogli di stile a cascata Codice HTML utilizzando Stile e Collegamento 
Selettori di tag, classi, ID e universali, nonché selettori di attributi nei moderni CSS
Dall'autore: Ciao a tutti. I colori e le immagini di sfondo svolgono un ruolo enorme nel web design, poiché ti consentono di progettare qualsiasi elemento in modo più attraente. Oggi vedremo come creare uno sfondo in HTML.
È possibile utilizzare HTML per impostare lo sfondo?
Dirò subito che no. In generale, HTML non è stato creato per progettare pagine web. È solo molto scomodo. Ad esempio esiste l'attributo bgcolor con il quale è possibile impostare il colore dello sfondo, ma questo è molto scomodo.
Di conseguenza, utilizzeremo i Cascading Style Sheets (CSS). Ci sono molte più opportunità per impostare uno sfondo. Oggi esamineremo quelli più basilari.
Come impostare uno sfondo usando i CSS?
Quindi, prima di tutto, devi decidere su quale elemento vuoi impostare lo sfondo. Cioè, dobbiamo trovare un selettore su cui scriveremo una regola. Ad esempio, se devi impostare lo sfondo per l'intera pagina nel suo insieme, puoi farlo tramite il selettore del corpo e per tutti i blocchi tramite il selettore div. Bene, ecc. Lo sfondo può e deve essere associato a qualsiasi altro selettore: classi di stile, identificatori, ecc.
Dopo aver deciso il selezionatore, è necessario scrivere il nome della struttura stessa. Per impostare il colore di sfondo (vale a dire un colore a tinta unita, non un gradiente o un'immagine), utilizzare la proprietà background-color. Dopo di ciò devi mettere i due punti e scrivere il colore stesso. Questo può essere fatto in diversi modi. Ad esempio, utilizzando parole chiave, codice esadecimale, formati rgb, rgba, hsl. Qualsiasi metodo andrà bene.
Il metodo più comunemente utilizzato è il codice esadecimale. Per selezionare i colori, è possibile utilizzare un programma che visualizza il codice colore. Ad esempio, Photoshop, Paint o qualche strumento online. Di conseguenza, ad esempio, scriverò un background generale per l'intera pagina web.
corpo( colore di sfondo: #D4E6B3; )
Questo codice deve essere inserito nella sezione head. È importante che i file si trovino nella stessa cartella.
Immagine come sfondo
Utilizzerò una piccola icona per l'immagine. linguaggio html:
Creiamo un blocco vuoto con un identificatore:
< div id = "bg" > < / div > |
Diamogli dimensioni e background espliciti:
#bg( larghezza: 400px; altezza: 250px; immagine di sfondo: url(html.png); )
#bg( larghezza: 400px; altezza: 250px; immagine di sfondo: URL (html. png); |
Da questo codice puoi vedere che ho utilizzato una nuova proprietà: background-image. È destinato specificamente all'inserimento di un'immagine come sfondo in un elemento html. Vediamo cosa è successo:
Per specificare un'immagine, è necessario scrivere dopo i due punti parola chiave url, quindi indicare il percorso del file tra parentesi. In questo caso il percorso viene specificato in base al fatto che l'immagine si trova nella stessa cartella del documento html. È inoltre necessario specificare il formato dell'immagine.
Se lo hai fatto e lo sfondo continua a non essere visualizzato nel blocco, controlla di nuovo se hai scritto correttamente il nome dell'immagine, se il percorso e l'estensione sono impostati correttamente. Questi sono i motivi più comuni per cui lo sfondo semplicemente non viene visualizzato perché il browser non riesce a trovare l'immagine.
Ma hai notato una cosa? Il browser ha preso e moltiplicato l'immagine in tutto il blocco. Quindi, giusto perché tu lo sappia, questo è il comportamento predefinito delle immagini di sfondo: vengono ripetute verticalmente e orizzontalmente finché riescono a adattarsi al blocco. Con questo comportamento puoi facilmente controllare. Per fare ciò, utilizza la proprietà background-repeat, che ha 4 valori principali:
Ripeti – valore predefinito, l'immagine viene ripetuta su entrambi i lati;
Repeat-x – ripete solo sull'asse x;
Ripeti-y: ripete solo lungo l'asse y;
Nessuna ripetizione: non si ripete affatto;
Puoi scrivere ogni valore e vedere cosa succede. Lo scriverò così:
ripetizione dello sfondo: ripetizione-x;
sfondo - ripeti: ripeti - x; |
Ora ripeti solo in orizzontale. Se imposti la non ripetizione, ci sarà una sola immagine.
Ottimo, possiamo finire qui, poiché queste sono le funzionalità di base per lavorare con lo sfondo, ma ti mostrerò altre 2 proprietà che ti consentono di ottenere un maggiore controllo.
Attraverso la ripetizione, i progettisti di layout erano in grado di creare trame e sfumature di sfondo utilizzando una piccola immagine. Potrebbe essere 30 x 10 pixel o anche più piccolo. O forse un po' di più. L'immagine era tale che quando veniva ripetuta su uno o addirittura su entrambi i lati, non erano visibili transizioni, quindi il risultato era un unico sfondo senza soluzione di continuità. A proposito, vale la pena utilizzare questo approccio ora se desideri utilizzare una texture senza interruzioni sul tuo sito web come sfondo. Oggi il gradiente può già essere implementato utilizzando i metodi css3, ne parleremo sicuramente più avanti.
Posizione dello sfondo
Per impostazione predefinita, l'immagine di sfondo, a meno che non sia impostata sulla ripetizione, sarà a sinistra angolo superiore il tuo blocco. Ma la posizione può essere facilmente modificata utilizzando la proprietà background-position.
Puoi impostarlo in diversi modi. Un'opzione è semplicemente indicare i lati in cui dovrebbe essere posizionata l'immagine:
posizione dello sfondo: in alto a destra;
posizione dello sfondo: in alto a destra; |
Cioè, verticalmente tutto rimane uguale: l'immagine di sfondo si trova in alto, ma orizzontalmente abbiamo cambiato il lato a destra, cioè a destra. Un altro modo per impostare una posizione è in percentuale. In questo caso il conto alla rovescia inizia comunque dall'angolo in alto a sinistra. 100% - l'intero blocco. Pertanto, per posizionare l'immagine esattamente al centro, la scriviamo in questo modo:
posizione dello sfondo: 50% 50%;
posizione dello sfondo: 50% 50%; |
Ricorda una cosa importante riguardo al posizionamento: il primo parametro è sempre la posizione orizzontale e il secondo è la posizione verticale. Quindi, se vedi un valore di 80% 20%, puoi immediatamente concludere che l'immagine di sfondo verrà spostata molto a destra, ma non scenderà molto.
E infine, puoi specificare la posizione in pixel. È tutto uguale, solo che al posto di % ci saranno px. In alcuni casi, tale posizionamento potrebbe essere necessario.
Notazione stenografia
Concordo sul fatto che il codice risulta piuttosto macchinoso se tutto è impostato come l'abbiamo fatto. Si scopre che è necessario specificare il percorso dell'immagine, la ripetizione e la posizione. Naturalmente non sempre ripetizione e posizione sono necessarie, ma in ogni caso sarebbe più corretto utilizzare una notazione abbreviata per la proprietà. Sembra questo:
sfondo: #333 url(bg.jpg) nessuna ripetizione 50% 50%;
sfondo: #333 url(bg.jpg) nessuna ripetizione 50% 50%; |
Cioè, il primo passo è registrare il colore di sfondo a tinta unita complessivo, se necessario. Poi il percorso verso l'immagine, la ripetizione e la posizione. Se qualche parametro non è necessario, semplicemente omettilo. D'accordo, questo è molto più veloce e conveniente e riduciamo anche in modo significativo il nostro codice. In generale ti consiglio di scrivere sempre in forma abbreviata, anche se devi indicare solo un colore o un'immagine.
Controllo della dimensione dell'immagine di sfondo
La nostra immagine attuale non è molto adatta per dimostrare il prossimo trucco, quindi ne prenderò un'altra. Lascia che abbia le dimensioni di un blocco o più grande. Quindi, immagina di dover affrontare il compito di creare un'immagine di sfondo in modo che non riempia completamente il suo blocco. E l'immagine, ad esempio, è addirittura più grande della dimensione del blocco.
Cosa puoi fare in questo caso? Naturalmente, l'opzione più semplice e ragionevole sarebbe semplicemente ridurre l'immagine, ma non è sempre possibile farlo. Diciamo che si trova sul server e in questo momento non c’è tempo né opportunità per ridurlo. Il problema può essere risolto utilizzando la proprietà background-size, che può essere definita relativamente nuova e che consente di manipolare la dimensione dell'immagine di sfondo, o addirittura di qualsiasi sfondo.
Quindi la mia immagine ora occupa tutto lo spazio nel blocco, ma le darò una dimensione di sfondo:
dimensione dello sfondo: 80% 50%;
dimensione dello sfondo: 80% 50%; |
Ancora una volta, il primo parametro imposta la dimensione orizzontale, il secondo quella verticale. Vediamo che tutto è stato applicato correttamente: la foto è diventata l'80% della larghezza del blocco in larghezza e metà in altezza. Qui devi solo fare una precisazione: impostando la dimensione in percentuale, puoi influenzare le proporzioni dell'immagine. Quindi fate attenzione se volete non stravolgere le proporzioni.
Come puoi immaginare, la dimensione dello sfondo può essere specificata anche in pixel. Ci sono altre due parole chiave che possono essere utilizzate:
Copertina – l'immagine verrà ridimensionata in modo che almeno su un lato riempia completamente il blocco.
Contenere: ridimensiona l'immagine in modo che l'immagine si adatti completamente al blocco alla sua dimensione massima.
Il vantaggio di questi valori è che non modificano le proporzioni dell'immagine, lasciandole invariate.
Dovresti anche capire che allungare l'immagine può portare a un deterioramento della sua qualità. Posso fare un esempio tratto dalla vita e dalla pratica reale dei progettisti di layout. Tutti sanno e capiscono che quando si progetta per desktop, è necessario adattare il sito alle larghezze del monitor principale: 1280, 1366, 1920. Se prendi un'immagine di sfondo con una dimensione, diciamo, 1280 per 200 e non la dai una dimensione di sfondo, quindi schermate con una larghezza maggiore Apparirà uno spazio vuoto, l'immagine non riempirà completamente la larghezza.
Nel 99% dei casi questo non è adatto allo sviluppatore web, quindi imposta la dimensione dello sfondo: cover in modo che l'immagine si estenda sempre fino alla larghezza massima della finestra. Questa è una buona tecnica da utilizzare, ma ora dovrai affrontare il problema che gli utenti con una larghezza dello schermo di 1920 pixel potrebbero vedere una qualità dell'immagine non ottimale.
Lascia che te lo ricordi, si allungherà alla sua larghezza massima. Di conseguenza, la qualità si deteriorerà automaticamente. L’unica soluzione corretta in questo caso sarebbe quella di utilizzare inizialmente un’immagine più grande – larga 1920 pixel. Quindi sugli schermi più ampi sarà nella sua dimensione naturale, mentre su altri verrà semplicemente ritagliata gradualmente, ma allo stesso tempo, con la corretta selezione dell'immagine di sfondo, aspetto Ciò non influirà sul sito.
In generale, questo è solo un esempio di come utilizzare le conoscenze acquisite in questo articolo durante la creazione di layout reali.
Sfondo traslucido utilizzando CSS
Un'altra funzionalità che può essere implementata con utilizzando i CSS – sfondo traslucido. Cioè, attraverso questo sfondo sarà possibile vedere cosa c'è dietro.
Ad esempio, imposterò l'intera pagina come sfondo dell'immagine utilizzata in precedenza negli esempi. Per il blocco con identificatore bg, sul quale conduciamo tutti i nostri esperimenti, imposteremo lo sfondo utilizzando il formato di impostazione del colore rgba.
Come ho detto prima, esistono molti formati per impostare i colori nei CSS. Uno di questi è l'rgb, un formato abbastanza noto a chi ci lavora redattori grafici. Si scrive così: rgb(17, 255, 34);
Il primo valore tra parentesi è la saturazione del rosso, poi del verde, poi del blu. Il valore può essere numerico compreso tra 0 e 255. Di conseguenza, formato RGB non è diverso, viene aggiunto solo un ulteriore parametro: il canale alfa. Il valore può essere compreso tra 0 e 1, dove 0 è la trasparenza completa.
brevi informazioni
Versioni CSS
Valori
url Il valore è il percorso del file grafico, specificato all'interno del costrutto url(). Il percorso del file può essere scritto tra virgolette (doppie o singole) o senza di esse. none Disabilita l'immagine di sfondo per l'elemento. ereditare Eredita il valore del genitore.HTML5 CSS2.1 IE Cr Op Sa Fx
Modello di oggetti
document.getElementById("elementID ").style. backgroundImage
Browser
Internet Explorer fino alla versione 7.0 inclusa, applica lo sfondo al bordo interno di un elemento su cui è impostata la proprietà hasLayout. Se l'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é continui.
Se l'elemento è impostato su scroll o auto , Internet Explorer 8 avrà un ritardo verticale di un pixel quando lo sfondo scorre.
Le versioni di Internet Explorer fino alla 7.0 inclusa non supportano il valore di eredità.
Se lo sfondo è impostato per una riga della tabella (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Risultato questo esempio V Browser Chrome mostrato in Fig. 1. Browser Internet Explorer, Opera e Firefox visualizzano correttamente lo sfondo della linea (Fig. 2).
Riso. 1. Ripeti lo sfondo per ogni cella
Riso. 2. Sfondo dell'intera linea
