CSS Creazione di sfondi strutturati

In CSS, gli utenti possono applicare varie proprietà per posizionare lo sfondo dell'elemento. Inoltre, CSS consente anche ai suoi utenti di aggiungere un'immagine strutturata come sfondo dell'elemento. IL "immagine di sfondo"La proprietà viene utilizzata per l'impostazione di una o più immagini come immagini di sfondo. Mentre il "Ripeat di sfondo"La proprietà CSS fa ripetere l'immagine di sfondo e strutturata.

In questo tutorial, illustreremo il metodo per la creazione di uno sfondo strutturato.

Come creare sfondo strutturato utilizzando il CSS?

Seguire la procedura per creare uno sfondo strutturato utilizzando il CSS.

Passaggio 1: crea un contenitore di div

In un documento HTML, crea un semplice ""Elemento con il nome della classe"T-background".

Passaggio 2: Aggiungi sezione

Quindi, aggiungi un "Tag insieme al "stile"Attributo e imposta lo stile come"Visualizza: Flex". Questa proprietà viene utilizzata per impostare il layout o la lunghezza di oggetti o elementi flessibili.

Passaggio 3: crea un altro div

Dentro il ""Container, inserire altri due elementi insieme a"Texture-1" E "Texture-2"Classi, rispettivamente:

Passaggio 4: elementi di classe di accesso

Nella sezione CSS, accedi a entrambi "div"Contenitori che hanno lezioni"Texture-1" E "Texture-2"Utilizzo del selettore DOT. Quindi, prova le proprietà di stile CSS menzionate:

.Texture-1, .texture-2
Margine: 50px;
Altezza: 200px;
larghezza: 200px;
Background-color: #1ece85;

Qui:

• Abbiamo usato il “margine"Proprietà per specificare lo spazio attorno all'elemento.
• Poi il "altezza"L'attributo viene utilizzato per allocare l'altezza all'elemento.
• IL "larghezzaLa proprietà "è impostata come"200px"Per definire la larghezza dell'elemento.
• "colore di sfondo"La proprietà CSS alloca il colore per lo sfondo dell'elemento.

L'immagine risultante descrive l'output del codice sopra:

Passaggio 5: creare sfondo come strutturato

Ora, applica le seguenti proprietà CSS per fare struttura allo sfondo:

.Texture-1
Immagina di background: gradiente di ripetizione lineare (36DEG, RGBA (255, 253, 253, 0.1), RGBA (255.255.255, 0.1) 1px, trasparente 0px, trasparente 2px);

Innanzitutto, usa il “.textured-1"Classe per accedere al primo elemento e applicare le varie proprietà:

• "immagine di sfondo"La proprietà viene utilizzata per impostare l'immagine sul lato posteriore dell'elemento.
• "REPLEDING-LINEAAR-CAMBRIE"È una funzione utilizzata per impostare l'immagine di sfondo. Questa funzione CSS rende un'immagine consiste nel ripetere i gradienti lineari.
• Quindi, imposta l'angolo come "36DEG"Per ripetere i gradi a discesa per gradiente.
• Successivamente, specificare il colore per il gradiente di ripetizione lineare come "RGBA (255, 253, 253, 0.1)" E "RGBA (255.255.255, 0.1) 1px".
• Infine, aggiungi la trasparenza all'immagine di sfondo.

Applichiamo uno sfondo di trama per il secondo "":

.texture-2
Immagina di sfondo: URL (/foglie.png);
Ripeat di sfondo: ripetizione;

Ora, accedi al secondo ""Usando".Texture-2". Quindi, applica il "immagine di sfondo"Proprietà e imposta l'immagine utilizzando l'URL di quell'immagine. Dopodiché, il "Ripeat di sfondo"L'attributo viene utilizzato per ripetere l'immagine sul retro.

Produzione

Si può osservare che abbiamo creato con successo gli sfondi strutturati.

Conclusione

Per creare gli sfondi strutturati, prima, crea un ""Container. Quindi, aggiungi altri due contenitori "" allo stesso modo e assegna loro le classi. Successivamente, accedi agli elementi utilizzando le rispettive classi e applica il "immagine di sfondo" E "Ripeat di sfondo" proprietà. Questo post ha spiegato la procedura per la creazione di sfondi strutturati.