Comment définir et modifier le style des images avec CSS

CSS (Cascading Style Sheets) est un langage de conception Web utilisé pour ajouter du style et de la mise en page aux pages Web. CSS offre un large éventail de fonctionnalités, notamment la possibilité d'ajouter des styles aux images. Dans cet article, nous apprendrons comment styliser et modifier des images à l'aide de CSS.

Première étape : sélectionner une image

Avant d'ajouter des styles à une image à l'aide de CSS, nous devons d'abord faire une sélection sur l'image à laquelle nous devons l'appliquer. Nous pouvons utiliser différents éléments HTML pour afficher des images, dont le plus courant est img. Nous pouvons utiliser le code suivant dans un document HTML pour afficher une image :

<img src=&#39;example.jpg&#39;>

Où l'attribut src représente l'URL du fichier que nous voulons utiliser comme source de l'image. Nous pouvons spécifier la source de l'image en utilisant des chemins relatifs ou absolus. Par exemple, si nous voulions afficher le fichier exemple.jpg à la racine de notre site Web, nous pourrions utiliser le code suivant :

<img src=&#39;/example.jpg&#39;>

Maintenant que nous avons sélectionné l'image que nous voulons styliser, voici les étapes pour ajouter styles à l’image.

Étape 2 : Définir la taille de l'image

Pour redimensionner l'image, nous pouvons utiliser les propriétés width et height de CSS. Par exemple, si nous voulions définir la largeur d'une image à 200 pixels et la hauteur à 150 pixels, nous pourrions utiliser le code suivant :

img {
   width: 200px;
   height: 150px;
}

où img est le sélecteur de l'élément auquel nous voulons appliquer le style. Les attributs width et height représentent la largeur et la hauteur de l'image que nous souhaitons définir. Dans ce cas, la largeur est fixée à 200 pixels et la hauteur à 150 pixels.

Étape 3 : Modifier la couleur de l'image

Nous pouvons utiliser l'attribut filter de CSS pour modifier la couleur de l'image. La valeur de l'attribut filter est une liste ordonnée de fonctions CSS, où chaque fonction représente le type de filtre et les paramètres à appliquer. Voici quelques types de filtres couramment utilisés :

-grayscale convertit une image en niveaux de gris.
-sépia convertit les images en tons sépia.
-invert inverse les couleurs de l'image.
-saturate augmente la saturation de l'image.
-luminositéAjustez la luminosité de l'image.
-contrasteAjustez le contraste de l'image.

Par exemple, si nous voulons convertir l'image en niveaux de gris, nous pouvons utiliser le code suivant :

img {
   filter: grayscale(100%);
}

Où, la fonction niveaux de gris (100 %) signifie convertir complètement l'image en niveaux de gris. On peut utiliser des valeurs comprises entre 0% et 100% pour préciser l'étendue de l'effet à appliquer.

Étape 4 : Appliquer la bordure

Nous pouvons utiliser la propriété CSS border pour ajouter une bordure à l'image. La propriété border comprend trois sous-propriétés : border-width, border-style et border-color. La propriété border-width définit la largeur de la bordure, la propriété border-style définit le style de la bordure et la propriété border-color définit la couleur de la bordure.

Par exemple, si nous voulons définir la bordure de notre image sur une ligne rouge continue avec une largeur de bordure de 2 pixels, nous pouvons utiliser le code suivant :

img {
   border-width: 2px;
   border-style: solid;
   border-color: red;
}

où, l'attribut border-width définit la largeur de la bordure, et l'attribut border-style définit le style de la bordure, "solid" signifie une bordure unie, l'attribut border-color définit la couleur de la bordure, ici nous choisissons le rouge.

Étape 5 : Faire pivoter l'image

Nous pouvons utiliser la propriété transform de CSS pour faire pivoter l'image. L'attribut transform comprend une série de fonctions, notamment rotate(), scale() et translation(). La fonction rotate() peut être utilisée pour faire pivoter des éléments.

Par exemple, si nous voulons faire pivoter notre image de 45 degrés, nous pouvons utiliser le code suivant :

img {
   transform: rotate(45deg);
}

Où, la fonction rotate(45deg) signifie faire pivoter l'image de 45 degrés. Nous pouvons utiliser des valeurs négatives pour faire pivoter l'image dans le sens inverse des aiguilles d'une montre.

Ces conseils ne font qu'une partie du style d'image CSS. Selon vos besoins, vous pouvez combiner plusieurs propriétés CSS pour obtenir l'effet final souhaité. Compte tenu de la conception globale et de l’ambiance de votre site Web, vous devez être cohérent dans le style de votre image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!