Come capovolgere l'immagine di sfondo usando CSS?
Questo blog spiegherà:
- Come inserire un'immagine di sfondo?
- Come capovolgere l'immagine di sfondo usando CSS?
Come inserire un'immagine di sfondo?
Per inserire le immagini di sfondo nella pagina Web, seguire le istruzioni passo-passo.
Passaggio 1: inserire l'intestazione
Innanzitutto, crea un'intestazione con l'aiuto di qualsiasi tag di intestazione disponibile in HTML. In questo scenario, il tag di intestazione H1 viene utilizzato.
Passaggio 2: crea un contenitore di div principale
Successivamente, crea un contenitore div usando il ""Elemento. Inoltre, inserisci un attributo ID con un nome specifico per identificare il div.
Passaggio 3: creare contenitori di div nidificati
Successivamente, creare contenitori di div nidificati seguendo la stessa procedura indicata nel passaggio precedente.
Passaggio 4: aggiungi un'immagine
Ora, aggiungi un'immagine utilizzando il ""Tag. Quindi, definisci i seguenti attributi all'interno del tag immagine:
- "src"L'attributo viene utilizzato per l'aggiunta del file multimediale.
- "Al"Viene utilizzato per mostrare il testo quando l'immagine non viene visualizzata per qualche motivo.
- "stile"L'attributo viene utilizzato per lo stile in linea. Per fare ciò, la larghezza e l'altezza delle proprietà CSS per impostare la dimensione dell'immagine in base ai valori specificati.
Passaggio 5: crea un contenitore di backflip
Successivamente, crea un contenitore di div con il nome di classe "backflip".
Passaggio 6: aggiungi l'intestazione per l'immagine Farfalla Produzione Spostati verso la sezione successiva per conoscere l'immagine di sfondo. Come capovolgere le immagini di sfondo usando CSS? Per capovolgere le immagini di sfondo usando CSS, applica il “trasformare"Proprietà con il"scalex" E "Scaley"Trasforma dopo l'accesso all'immagine aggiunta. Per fare ciò, segui la procedura menzionata. Passaggio 1: contenitore Style Main Div Secondo lo snippet di codice sopra, le seguenti proprietà CSS sono state applicate al contenitore: Passaggio 2: applicare lo stile CSS sul contenitore interno Quindi, applica le seguenti proprietà CSS: Passaggio 3: applicare la proprietà "trasforma" Poi: Passaggio 4: impostare "Visibilità backface" Per fare ciò, applica le proprietà menzionate: Produzione Si tratta di lanciare un'immagine di sfondo usando CSS. Conclusione Per capovolgere l'immagine di sfondo usando CSS, prima, aggiungi un'immagine usando ""Elemento. Quindi, applica le proprietà CSS "transizione"E imposta il valore. Dopodiché, applica il "trasformare"Proprietà per l'impostazione della trasformazione e impostare il valore di questa proprietà come"Rotatey (180 gradi)", Che ruota l'immagine in base al valore indicato. Questo post è incentrato sul lancio dell'immagine di sfondo usando CSS.
Ora, aggiungi una voce con l'aiuto di " Flip Image
Accedi al contenitore di div principale con l'aiuto del "id"Selettore lungo il nome ID come"#Main-Flip":
Background-color: trasparente;
larghezza: 400px;
Altezza: 300px;
Margine: 30px 150px;
Accedi al contenitore interno con l'aiuto del nome della classe ".flip interno":
Posizione: relativo;
larghezza: 100%;
Altezza: 100%;
Testo-align: centro;
Transizione: trasforma 0.7s;
Transform-Style: Preserve-3D;
Accedi all'elemento Div principale con il nome ID lungo il ": Hover"Selettore e Div interiore con l'aiuto del nome della classe come".flip interno":
Transform: Rotey (180DEG);
Accedere a entrambi i contenitori di div con il loro nome come "#Front-Flip" E ".back-flip"Per impostare la visibilità:
Backface-visibility: eredità;
Colore: RGB (39, 39, 243);
Background-color: RGB (196, 243, 196);