Stretch Sfrolla Immagine CSS?
Questo tutorial dimostrerà come allungare le immagini di sfondo con CSS.
Come allungare l'immagine di sfondo con CSS?
Per allungare l'immagine di sfondo con CSS, prova le istruzioni fornite.
Passaggio 1: crea il primo contenitore di div
Innanzitutto, aggiungi un "div"Container utilizzando il""Tag e assegnarlo un"id"Attributo all'interno del contenitore.
Passaggio 2: aggiungi l'intestazione
Aggiungi un'intestazione usando il ""Tag nel documento HTML. IL "
"Il tag viene utilizzato per incorporare il livello uno intestazione.
Passaggio 3: crea un secondo contenitore
Successivamente, crea un altro ""Contenitore insieme al"classe"Attributo, aggiungi un tag di intestazione""E incorpora l'intestazione. Successivamente, aggiungi un altro "" seguendo la stessa procedura:
Size di sfondo: Copertura:
Size di sfondo: Auto al 100%:
Passaggio 4: Stile prima classe contenitore
Qui, accedi all'elemento "" con classe "IMG-1" con l'aiuto di "."Selettore e applica le seguenti proprietà di CSS:
Bordo: 3px Solid RGB (240, 12, 12);
larghezza: 500px;
Altezza: 200px;
Contesto: URL (emoji.png);
Size di sfondo: copertina;
Qui:
- IL "confine"La proprietà imposta un limite attorno all'elemento.
- "larghezza"Definisce la dimensione dell'elemento orizzontale.
- "altezza"Specifica la dimensione dell'elemento verticalmente.
- "sfondo"È utilizzato per allocare il colore di sfondo dell'elemento.
- "Size di sfondo"Proprietà con il"copertina"Il valore viene utilizzato come dimensione di sfondo che ridimensiona l'immagine per riempire il contenitore:
Passaggio 5: Stile Second Container Class
Accedi al secondo contenitore Div utilizzando il nome della classe ".IMG-2"E applica le proprietà indicate:
Bordo: 3px Solid RGB (226, 17, 17);
larghezza: 500px;/ * larghezza schermo */
Altezza: 200px;/ * Schermate altezza */
Contesto: URL (emoji.png);
Ripeat background: no-ripetizione;
Size di sfondo: Auto al 100%;
Nel blocco sopra:
- IL "Ripeat di sfondo"La proprietà viene utilizzata per ripetere l'immagine lungo gli assi orizzontali e verticali. Qui, il valore è impostato come "no-ripeat"Per non ripetere l'immagine.
- Poi il "Size di sfondo"È impostato come"Auto al 100%".
Produzione
Si può notare che abbiamo allungato con successo l'immagine di sfondo usando CSS.
Conclusione
Per allungare l'immagine di sfondo, prima, utilizza il “sfondo"Proprietà per impostare l'immagine di sfondo per un elemento insieme al valore come"URL". Quindi, utilizzare la proprietà CSS "Size di sfondo" COME "copertina" O "Auto al 100%"Per allungare l'immagine. Questo post ti ha insegnato come CSS allunga l'immagine di sfondo.