Cours IT Bases CSS 023_Images, Arrière-plan

Images

Les images sont un type de média très important dans les pages web. L’utilisation judicieuse des images peut rendre les pages web colorées et vivantes, sans se limiter au texte froid.

Mise en page des images

L’élément img est par défaut un élément en ligne et possède une marge par défaut de 5px. En le définissant comme élément de bloc, une seule image peut être affichée par ligne. En le définissant comme élément en ligne, plusieurs images peuvent être affichées sur une même ligne. Pour positionner les éléments de bloc, on utilise la propriété margin, pour les éléments en ligne, on utilise la propriété text-align.

Exemple :

1
<img src="zhaojian1.jpg" alt="" >
2
<img src="zhaojian1.jpg" alt="" >
3
<img src="zhaojian1.jpg" alt="" >
4
<img style="display: block;" src="zhaojian1.jpg" alt="" >
5
<img style="display: block;" src="zhaojian1.jpg" alt="" >
6
<img style="display: block;margin: 0 auto;" src="zhaojian1.jpg" alt="" >

Effet :

Transparence des images

En CSS, vous pouvez utiliser la propriété opacity pour définir la transparence des éléments (y compris les images). Cette propriété accepte une valeur allant de 0 (complètement transparent) à 1 (complètement opaque).

Si vous souhaitez uniquement rendre le fond de l’image transparent sans affecter le contenu, vous pouvez utiliser des valeurs de couleur RGBA.

Exemple :

1
<img src="zhaojian1.jpg" alt="" >
2
<img style="opacity: 0.5;" src="zhaojian1.jpg" alt="" >

Effet :

Coins arrondis des images

En CSS, vous pouvez utiliser la propriété border-radius pour ajouter des coins arrondis aux images. Cette propriété est utilisée pour définir le degré de courbure des coins de la bordure d’un élément.

Exemple :

1
<img style="border-radius: 10px;" src="zhaojian1.jpg" alt="" >
2
<!-- Définir le rayon du coin arrondi, ajustable selon les besoins -->
3
<img style="border-radius: 20px 10px;" src="zhaojian1.jpg" alt="" >
4
<!-- Rayon horizontal 20px, rayon vertical 10px -->
5
<img style="border-radius: 10px 20px 15px 5px;" src="zhaojian1.jpg" alt="" >
6
<!-- En haut à gauche 10px, en haut à droite 20px, en bas à droite 15px, en bas à gauche 5px -->

Effet :

Ombre des images

En CSS, vous pouvez utiliser la propriété box-shadow pour ajouter des effets d’ombre aux images. Cette propriété permet d’ajouter des effets de projection, incluant la couleur de l’ombre, le rayon de flou, le décalage, etc.

Exemple :

1
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" src="zhaojian1.jpg" alt="" >
2
<br><br>
3
<!-- Décalage horizontal 5px, décalage vertical 5px, rayon de flou 10px, couleur d'ombre noir semi-transparent -->
4
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.7) inset;" src="zhaojian1.jpg" alt="" >
5
<!-- Ombre extérieure et ombre intérieure, utilisez le mot-clé inset pour spécifier l'ombre intérieure -->

Effet :

Arrière-plan

En CSS, l’arrière-plan est l’un des styles les plus couramment utilisés dans la conception web, servant à définir le style d’arrière-plan des éléments.

Couleur d’arrière-plan

La couleur d’arrière-plan d’un élément est définie via la propriété background-color.

Exemple :

1
    .example1 {
2
        background-color: #f0f0f0;
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

Effet :

Image d’arrière-plan

L’image d’arrière-plan d’un élément est définie via la propriété background-image. On peut utiliser des chemins relatifs, des chemins absolus ou des URLs.

Exemple :

1
    .example1 {
2
        background-image: url('zhaojian.jpg');
3
        width: 500px;
4
        height: 500px;
5
    }

1
    <div class="example1"></div>

Effet :

Répétition de l’arrière-plan (Mosaïque)

La propriété background-repeat définit le mode de répétition de l’image d’arrière-plan, qui peut être horizontal, vertical, dans les deux directions ou sans répétition.

• repeat : L’image se répète horizontalement et verticalement (par défaut)
• repeat-x : L’image se répète horizontalement
• repeat-y : L’image se répète verticalement
• no-repeat : L’image n’est affichée qu’une seule fois

Exemple :

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        background-repeat: no-repeat;
8
    }
9
    .example2 {
10
        background-repeat: repeat-x;
11
    }
12
    .example3 {
13
        background-repeat: repeat-y;
14
    }

1
    Sans répétition
2
    <div class="base example1"></div>
3
    Répétition horizontale
4
    <div class="base example2"></div>
5
    Répétition verticale
6
    <div class="base example3"></div>

Effet :

Taille de l’arrière-plan

La propriété background-size définit la taille de l’image d’arrière-plan, qui peut être en valeurs de pixels concrètes, en pourcentages, ou en utilisant des mots-clés comme cover ou contain.

• Par défaut : Affichage complet de l’image d’arrière-plan originale.
• auto : L’image est mise à l’échelle proportionnellement en arrière-plan, l’image est répétée en mosaïque.
• cover : L’image est étendue pour couvrir toute la zone, en maintenant les proportions. L’image peut ne pas être affichée complètement, avec des parties débordantes.
• contain : L’image est mise à l’échelle autant que possible en maintenant les proportions, de sorte que la hauteur ou la largeur s’adapte complètement à la zone d’arrière-plan. La mise à l’échelle peut entraîner des zones vides dans l’arrière-plan, où la zone vide du conteneur affichera la couleur d’arrière-plan définie par background-color.

Exemple :

1
    .base {
2
        width: 200px;
3
        height: 200px;
4
    }
5
    .example1 {
6
        background-image: url('zhaojian.jpg');
7
        background-size: auto;
8
    }
9
    .example2 {
10
        background-image: url('zhaojian2.jpg');
11
        background-size: cover;
12
    }
13
    .example3 {
14
        background-image: url('zhaojian2.jpg');
15
        background-size: contain;
16
    }
17
    .example4 {
18
        background-image: url('zhaojian2.jpg');
19
        background-size: 50% 100%;
20
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>
6
    <br>
7
    <div class="base example4"></div>

Effet :

Position de l’arrière-plan

La propriété background-position définit la position initiale de l’image d’arrière-plan, en utilisant des valeurs de pixels, des pourcentages ou des mots-clés.

• Toute unité de longueur peut être utilisée, si la deuxième position (direction de l’axe Y) n’est pas déclarée, la valeur par défaut est 50% (si les deux positions ne sont pas définies, la valeur par défaut est 0% 0%)
• Mots-clés de position (left/right/top/bottom/center), utilisables seuls ou par paires (si le deuxième mot-clé n’est pas déclaré, la valeur par défaut est center)
• Utilisation mixte

Exemple :

1
    .base {
2
        background-image: url('zhaojian1.jpg');
3
        background-repeat: no-repeat;
4
        background-color: #d6d7d8;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example1 {
9
        background-position: center top;
10
    }
11
    .example2 {
12
        background-position: 50% 50%;
13
    }
14
    .example3 {
15
        background-position: 50% bottom;
16
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>
4
    <br>
5
    <div class="base example3"></div>

Effet :

Attachement de l’arrière-plan (Fixation)

La propriété background-attachment définit si l’image d’arrière-plan est fixe ou défile avec le contenu.

• scroll : L’image d’arrière-plan se déplace avec le défilement de la page (par défaut)
• fixed : L’image d’arrière-plan ne se déplace pas avec le défilement de la page
• local : L’image d’arrière-plan défile avec le contenu de l’élément

Exemple :

1
.example1 {
2
  background-attachment: scroll;
3
}
4
.example2 {
5
  background-attachment: fixed;
6
}
7
.example3 {
8
  background-attachment: local;
9
}

Effet :

Raccourci d’arrière-plan

La propriété background permet une écriture raccourcie, beaucoup plus concise que la déclaration de sous-propriétés individuelles, économisant beaucoup de code. Comme background possède de nombreuses sous-propriétés, l’ordre de l’écriture raccourcie est également un défi. CSS2 recommande la règle d’ordre suivante pour l’écriture raccourcie :

Exemple :

1
.example1{
2
  background: color image repeat attachment position/size;
3
}
4

5
.example2{
6
  background: #ffffff url('img_tree.png') no-repeat right top;
7
}