Proprietà CSS relative allo sfondo

Articles

Questo articolo spiega le proprietà CSS relative allo sfondo.

Puoi imparare come descrivere le proprietà come impostazione dello sfondo, posizione e ripetizione.

YouTube Video

Creazione di HTML per l'anteprima

css-background.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-background.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Background-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Background And Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>background-color</h3>
 23            <section>
 24                <header><h4>background-color: red</h4></header>
 25                <section class="sample-view">
 26                    <div class="red-example">This is a red background.</div>
 27                </section>
 28                <header><h4>background-color: #FF5733</h4></header>
 29                <section class="sample-view">
 30                    <div class="hex-example">This is a background with hex color (#FF5733).</div>
 31                </section>
 32                <header><h4>background-color: rgb(255, 87, 51)</h4></header>
 33                <section class="sample-view">
 34                    <div class="rgb-example">This is a background with RGB color (rgb(255, 87, 51)).</div>
 35                </section>
 36                <header><h4>background-color: rgba(255, 87, 51, 0.7)</h4></header>
 37                <section class="sample-view">
 38                    <div class="rgba-example">This is a background with RGBA color (rgba(255, 87, 51, 0.7)).</div>
 39                </section>
 40                <header><h4>background-color: hsl(14, 100%, 60%)</h4></header>
 41                <section class="sample-view">
 42                    <div class="hsl-example">This is a background with HSL color (hsl(14, 100%, 60%)).</div>
 43                </section>
 44                <header><h4>background-color: hsla(14, 100%, 60%, 0.7)</h4></header>
 45                <section class="sample-view">
 46                    <div class="hsla-example">This is a background with HSLA color (hsla(14, 100%, 60%, 0.7)).</div>
 47                </section>
 48                <header><h4>background-color: transparent</h4></header>
 49                <section class="sample-view">
 50                    <div class="transparent-example">This is a background with transparency (transparent).</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>background-image</h3>
 56            <section>
 57                <header><h4>background-image: url('image.jpg')</h4></header>
 58                <section class="sample-view">
 59                    <div class="background-image-example">This is a background image.</div>
 60                </section>
 61                <header><h4>background-image: linear-gradient(to right, red, blue)</h4></header>
 62                <section class="sample-view">
 63                    <div class="background-image-gradient">This is a background gradient.</div>
 64                </section>
 65            </section>
 66        </article>
 67        <article>
 68            <h3>background-position</h3>
 69            <section>
 70                <header><h4>background-position: top left</h4></header>
 71                <section class="sample-view">
 72                    <div class="top-left-example">Top Left</div>
 73                </section>
 74                <header><h4>background-position: center</h4></header>
 75                <section class="sample-view">
 76                    <div class="center-example">Center</div>
 77                </section>
 78                <header><h4>background-position: bottom right</h4></header>
 79                <section class="sample-view">
 80                    <div class="bottom-right-example">Bottom Right</div>
 81                </section>
 82            </section>
 83        </article>
 84        <article>
 85            <h3>background-size</h3>
 86            <section>
 87                <header><h4>background-size: cover</h4></header>
 88                <section class="sample-view">
 89                    <div class="cover-example">Cover</div>
 90                </section>
 91                <header><h4>background-size: contain</h4></header>
 92                <section class="sample-view">
 93                    <div class="contain-example">Contain</div>
 94                </section>
 95                <header><h4>background-size: 100px 100px</h4></header>
 96                <section class="sample-view">
 97                    <div class="fixed-size-example">100px by 100px</div>
 98                </section>
 99            </section>
100        </article>
101        <article>
102            <h3>background-repeat</h3>
103            <section>
104                <header><h4>background-repeat: repeat</h4></header>
105                <section class="sample-view">
106                    <div class="repeat-example">Repeat</div>
107                </section>
108                <header><h4>background-repeat: repeat-x</h4></header>
109                <section class="sample-view">
110                    <div class="repeat-x-example">Repeat X</div>
111                </section>
112                <header><h4>background-repeat: no-repeat</h4></header>
113                <section class="sample-view">
114                    <div class="no-repeat-example">No Repeat</div>
115                </section>
116                <header><h4>background-repeat: space</h4></header>
117                <section class="sample-view">
118                    <div class="space-example">Space</div>
119                </section>
120                <header><h4>background-repeat: round</h4></header>
121                <section class="sample-view">
122                    <div class="round-example">Round</div>
123                </section>
124            </section>
125        </article>
126    </main>
127</body>
128</html>

Sfondo e Decorazione

Proprietà `background-color`

 1/* Background color specification */
 2.red-example {
 3    background-color: red;
 4}
 5
 6.hex-example {
 7    background-color: #FF5733;
 8}
 9
10.rgb-example {
11    background-color: rgb(255, 87, 51);
12}
13
14.rgba-example {
15    background-color: rgba(255, 87, 51, 0.7);
16}
17
18.hsl-example {
19    background-color: hsl(14, 100%, 60%);
20}
21
22.hsla-example {
23    background-color: hsla(14, 100%, 60%, 0.7);
24}
25
26.transparent-example {
27    background-color: transparent;
28    color: black;
29}

La proprietà background-color viene utilizzata in CSS per impostare il colore di sfondo di un elemento. Puoi specificare il colore visualizzato dietro il testo e altri elementi, e i colori possono essere definiti in vari formati. Il metodo per specificare i colori è simile alla proprietà color, ma puoi anche specificare uno sfondo completamente trasparente utilizzando transparent.

Spiegazione:

La classe red-example specifica il colore di sfondo come rosso utilizzando una parola chiave.
La classe hex-example specifica il colore di sfondo utilizzando un codice esadecimale.
La classe rgb-example specifica il colore di sfondo utilizzando il formato RGB.
La classe rgba-example specifica il colore di sfondo utilizzando il formato RGBA, aggiungendo trasparenza.
La classe hsl-example specifica il colore di sfondo utilizzando il formato HSL.
La classe hsla-example specifica il colore di sfondo utilizzando il formato HSLA, aggiungendo trasparenza.
La classe transparent-example imposta lo sfondo come trasparente.

Proprietà `background-image`

 1/* Background image styles */
 2.background-image-example {
 3    /* Specify the image URL */
 4    background-image: url('image.jpg');
 5    /* Scale the image to cover the entire element */
 6    background-size: cover;
 7    /* Center the image */
 8    background-position: center;
 9    /* Disable image repetition */
10    background-repeat: no-repeat;
11    color: white;
12    display: flex;
13    align-items: center;
14    justify-content: center;
15}
16
17/* Gradient background styles */
18.background-image-gradient {
19    /* Gradient from left to right */
20    background-image: linear-gradient(to right, red, blue);
21    color: white;
22    display: flex;
23    align-items: center;
24    justify-content: center;
25}

La proprietà background-image viene utilizzata per impostare un'immagine come sfondo di un elemento. L'immagine specificata viene visualizzata come sfondo dell'elemento, e le sue dimensioni, posizione e metodo di ripetizione possono essere regolate con altre proprietà correlate. Spiegheremo anche altre proprietà correlate come background-size, background-position e background-repeat più avanti.

Spiegazione:

La classe background-image-example utilizza la proprietà background-image per impostare image.jpg come sfondo. background-size: cover fa in modo che l'immagine copra l'intero elemento, e background-position: center centra l'immagine. La ripetizione è disabilitata con background-repeat: no-repeat.
La classe background-image-gradient utilizza linear-gradient() per impostare un gradiente di sfondo dal rosso al blu. Il gradiente viene visualizzato da sinistra a destra.

Tipi di valori che possono essere specificati

La proprietà background-image può assumere i seguenti valori.

url(): Specifica l'URL dell'immagine di sfondo. Includi il file dell'immagine all'interno di url(). (ex.url('image.jpg'))
none: Specifica di non impostare un'immagine di sfondo. Questo è il valore predefinito.
Gradients: È anche possibile impostare gradienti come immagini di sfondo utilizzando le caratteristiche dei gradienti CSS. (ex.linear-gradient(), radial-gradient())

Punti chiave della proprietà `background-image`

Dimensioni e posizionamento dell'immagine: Le dimensioni e il posizionamento delle immagini di sfondo possono essere controllati con precisione attraverso altre proprietà, consentendo regolazioni di design. Per esempio, specificando background-size: cover, l'immagine viene estesa per coprire l'intera area, eliminando eventuali ritagli.
Usare Gradienti: Invece di un'immagine, puoi utilizzare un gradiente come sfondo, aggiungendo un elemento dinamico al design.

Proprietà `background-position`

 1/* Positioned at the top-left */
 2.top-left-example {
 3    background-image: url('image.jpg');
 4    background-position: top left;
 5    background-size: cover;
 6    background-repeat: no-repeat;
 7    background-color: lightblue;
 8    height: 100px;
 9}
10
11/* Centered */
12.center-example {
13    background-image: url('image.jpg');
14    background-position: center;
15    background-size: cover;
16    background-repeat: no-repeat;
17    background-color: lightcoral;
18    height: 100px;
19}
20
21/* Positioned at the bottom-right */
22.bottom-right-example {
23    background-image: url('image.jpg');
24    background-position: bottom right;
25    background-size: cover;
26    background-repeat: no-repeat;
27    background-color: lightgreen;
28    height: 100px;
29}

La proprietà background-position viene utilizzata per specificare la posizione di un'immagine di sfondo all'interno di un elemento. Controllando dove l'immagine di sfondo appare all'interno dell'elemento, è possibile creare layout che si adattano al tuo design. Il valore predefinito è 0% 0%, posizionando l'immagine nell'angolo in alto a sinistra.

Spiegazione:

La classe top-left-example specifica la posizione dell'immagine come top left, posizionandola nell'angolo in alto a sinistra.
La classe center-example posiziona l'immagine al centro utilizzando l'attributo center.
La classe bottom-right-example specifica la posizione dell'immagine come bottom right, posizionandola nell'angolo in basso a destra.

Tipi di valori che possono essere specificati

La proprietà background-position può assumere i seguenti tipi di valori.

Parole chiave: Puoi specificare left, right, top, bottom, center.
- Specificare center posizionerà l'immagine di sfondo al centro dell'elemento.
- Specificare right posizionerà l'immagine di sfondo sul lato destro.
- Specificare top left posizionerà l'immagine di sfondo nell'angolo in alto a sinistra.
- Specificando bottom right l'immagine di sfondo verrà posizionata nell'angolo in basso a destra.
Lunghezza o percentuale: Puoi specificare valori come 10px 20px, 50% 50%.
- Specificando 10px 20px l'immagine di sfondo verrà posizionata a 10px da sinistra e a 20px dall'alto.
- Specificando 50% 50% l'immagine di sfondo verrà centrata sia orizzontalmente che verticalmente.
Funzione calc(): Consente un posizionamento più preciso utilizzando calcoli CSS.

La proprietà `background-size`

 1/* Fit the image to cover the entire area */
 2.cover-example {
 3    background-image: url('image.jpg');
 4    /* The image covers the entire element */
 5    background-size: cover;
 6    background-color: lightblue;
 7}
 8
 9/* Fit the image within the element */
10.contain-example {
11    background-image: url('image.jpg');
12    /* The image fits within the element */
13    background-size: contain;
14    background-color: lightgreen;
15}
16
17/* Display at a fixed size */
18.fixed-size-example {
19    background-image: url('image.jpg');
20    /* Fixed width of 100px and height of 100px */
21    background-size: 100px 100px;
22    background-color: lightcoral;
23}

La proprietà background-size viene utilizzata per specificare la dimensione di un'immagine di sfondo per un elemento. Utilizzando questa proprietà, puoi regolare come viene visualizzata l'immagine di sfondo, se riempie l'intero elemento o mantiene la sua dimensione originale per adattarsi al design. Il valore predefinito è auto, che mantiene la dimensione originale dell'immagine di sfondo.

Spiegazione:

La classe cover-example specifica cover. L'immagine verrà ingrandita per coprire l'intero elemento, ma alcune parti potrebbero essere tagliate.
La classe contain-example specifica contain. L'immagine verrà adattata per rientrare nell'elemento, ma potrebbero apparire spazi vuoti.
La classe fixed-size-example specifica una dimensione fissa per l'immagine di sfondo, impostando sia la larghezza sia l'altezza a 100px.

Tipi di valori che possono essere specificati

Alla proprietà background-size possono essere assegnati i seguenti tipi di valori.

Parole chiave
- auto: Mantiene la dimensione di default dell'immagine (larghezza e altezza vengono determinate automaticamente).
- cover: Regola la dimensione dell'immagine di sfondo per coprire completamente l'elemento. Riempirà l'intero elemento, ma alcune parti dell'immagine potrebbero essere tagliate.
- contain: Adatta l'immagine per rientrare nell'elemento, ma non copre l'intero elemento. Il rapporto d'aspetto dell'immagine viene mantenuto.
Valori numerici (px, %, em, ecc.)
- Larghezza e Altezza: Specifica esplicitamente la larghezza e l'altezza. Se viene specificato solo un valore, esso si applica alla larghezza, mentre l'altezza viene regolata automaticamente.
- Percentuale: Specifica la dimensione dell'immagine di sfondo come percentuale della dimensione dell'elemento. Ad esempio, 50% 50% imposta l'immagine a metà della larghezza e altezza dell'elemento.

Proprietà `background-repeat`

 1/* Repeat vertically and horizontally */
 2.repeat-example {
 3    background-image: url('pattern.png');
 4    background-repeat: repeat;
 5    background-size: auto;
 6}
 7
 8/* Repeat only horizontally */
 9.repeat-x-example {
10    background-image: url('pattern.png');
11    background-repeat: repeat-x;
12    background-size: auto;
13}
14
15/* No repetition */
16.no-repeat-example {
17    background-image: url('pattern.png');
18    background-repeat: no-repeat;
19    background-size: auto;
20}
21
22/* Space out evenly */
23.space-example {
24    background-image: url('pattern.png');
25    background-repeat: space;
26    background-size: auto;
27    width: 90px;
28    height: 60px;
29}
30
31/* Resize and repeat */
32.round-example {
33    background-image: url('pattern.png');
34    background-repeat: round;
35    background-size: auto;
36}

La proprietà background-repeat viene utilizzata per controllare come l'immagine di sfondo di un elemento viene ripetuta. Per impostazione predefinita, l'immagine di sfondo viene ripetuta orizzontalmente e verticalmente all'interno dell'elemento, ma è possibile personalizzare il comportamento di ripetizione utilizzando questa proprietà.

Spiegazione:

La classe repeat-example visualizza l'immagine ripetuta sia verticalmente sia orizzontalmente.
La classe repeat-x-example ripete l'immagine solo orizzontalmente.
La classe no-repeat-example visualizza l'immagine solo una volta senza ripetizioni.
La classe space-example dispone le immagini di sfondo in modo uniforme con uno spazio uguale tra di esse.
La classe round-example ridimensiona automaticamente l'immagine di sfondo per ripetersi e riempire l'intero elemento.

Valori che possono essere specificati

Alla proprietà background-repeat possono essere assegnati i seguenti tipi di valori.

repeat: L'immagine di sfondo viene ripetuta sia lungo l'asse X (orizzontale) che l'asse Y (verticale). Questo è il valore predefinito.
repeat-x: L'immagine di sfondo viene ripetuta solo lungo l'asse X (orizzontale).
repeat-y: L'immagine di sfondo viene ripetuta solo lungo l'asse Y (verticale).
no-repeat: L'immagine di sfondo non viene ripetuta ed è visualizzata una sola volta.
space: L'immagine di sfondo viene ripetuta a intervalli regolari, con spazi uguali tra loro.
round: L'immagine di sfondo viene ripetuta, ma la dimensione è regolata per riempire l'intero elemento. L'immagine potrebbe essere ridimensionata.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS relative al modello a scatola Proprietà CSS relative alla decorazione del modello di scatola

Proprietà CSS relative allo sfondo

YouTube Video

Creazione di HTML per l'anteprima

Sfondo e Decorazione

Proprietà background-color

Spiegazione:

Proprietà background-image

Spiegazione:

Tipi di valori che possono essere specificati

Punti chiave della proprietà background-image

Proprietà background-position

Spiegazione:

Tipi di valori che possono essere specificati

La proprietà background-size

Spiegazione:

Tipi di valori che possono essere specificati

Proprietà background-repeat

Spiegazione:

Valori che possono essere specificati

YouTube Video

Proprietà `background-color`

Proprietà `background-image`

Punti chiave della proprietà `background-image`

Proprietà `background-position`

La proprietà `background-size`

Proprietà `background-repeat`