Paramètres CSS des images

Paramètres CSS de l'image

CSS est l'un des composants les plus importants de la conception Web. Il s'agit d'un langage de feuille de style utilisé pour définir l'apparence et le formatage des pages Web. Parmi eux, les paramètres CSS des images font partie intégrante de la conception Web.

CSS a une fonctionnalité intéressante, c'est-à-dire qu'il peut agir directement sur les éléments des documents HTML, y compris les images. Grâce aux paramètres CSS, nous pouvons modifier divers attributs tels que la taille, la position et la transparence des images pour rendre la page Web plus belle, plus pratique et plus facile à lire.

Cet article se concentrera sur plusieurs propriétés couramment utilisées dans les paramètres CSS des images : hauteur, largeur, position, arrière-plan, transparence et bordure, et fournira des exemples de code et de rendus.

1. Hauteur et largeur

En CSS, vous pouvez utiliser les attributs de hauteur et de largeur pour définir la hauteur et la largeur de l'image. Ces deux propriétés peuvent être spécifiées en pixels (px), en pourcentages (%) ou en d'autres unités.

Par exemple, si on veut régler la largeur d'une image à 100 pixels et que la hauteur s'adapte automatiquement, on peut écrire comme ceci :

img {
  width: 100px;
  height: auto;
}

Dans le code ci-dessus , L'attribut height est défini sur "auto", ce qui signifie que la hauteur sera adaptée en fonction des proportions originales de l'image.

Si l'on veut régler la largeur d'une image à 50% de la largeur de la page web, et que la hauteur est également adaptative selon la proportion d'origine, on peut écrire comme ceci : #🎜🎜 #

img {
  width: 50%;
  height: auto;
}

#🎜🎜 #Position

2. Grâce à l'attribut position en CSS, nous pouvons définir la position de l'image. La position a trois valeurs d'attribut couramment utilisées : statique, relative et absolue.

static : Valeur d'attribut par défaut, les images sont affichées dans l'ordre normal des documents HTML.

• relative : Positionnement relatif, l'image est déplacée par rapport à sa position d'origine.
• absolute : Positionnement absolu, l'image se déplace par rapport au conteneur la contenant.
• Par exemple, si on veut déplacer une image de 30 pixels vers la droite par rapport à sa position d'origine, on peut écrire comme ceci :

img {
  position: relative;
  left: 30px;
}

Ce qui précède code , les attributs position:relative et left:30px sont utilisés. L'attribut left indique le déplacement du nombre spécifié de pixels vers la gauche ou la droite.

Si on veut placer une image dans le coin supérieur droit de la page web, on peut écrire comme ceci :

img {
  position: absolute;
  top: 0;
  right: 0;
}

Dans le code ci-dessus, position:absolute, top :0 et right:0 attribut. Les propriétés top et right représentent respectivement la distance par rapport aux côtés supérieur et droit du conteneur défini.

Background

3. Grâce à l'attribut background en CSS, nous pouvons définir une image comme arrière-plan. L'attribut background a diverses valeurs d'attribut, notamment la couleur, l'image, la méthode de répétition et la position.

Par exemple, si nous voulons utiliser une image comme arrière-plan, nous pouvons écrire comme ceci :

body {
  background-image: url("example.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

Dans le code ci-dessus, nous utilisons l'image comme arrière-plan de l'élément body et les propriétés background-repeat, background-position et background-size sont définies. Background-repeat est défini sur no-repeat, ce qui signifie qu'il ne réapparaîtra pas ; background-position est défini sur center center, ce qui signifie que l'image est centrée lorsque l'arrière-plan est défini sur cover, ce qui signifie que l'image d'arrière-plan est définie sur "no-repeat". garanti pour couvrir complètement la zone d’arrière-plan.

Transparence

4. Grâce à l'attribut opacité en CSS, nous pouvons ajuster la transparence de l'image. La valeur de l'attribut opacité est un nombre compris entre 0 et 1, où 0 signifie complètement transparent et 1 signifie complètement opaque.

Par exemple, si on veut régler la transparence d'une image sur semi-transparent, on peut écrire comme ceci :

img {
  opacity: 0.5;
}

border

# 🎜🎜#
5. Grâce à l'attribut border en CSS, nous pouvons ajouter des bordures aux images. Les propriétés de bordure incluent la largeur, le style et la couleur de la ligne de bordure.

Par exemple, si on veut ajouter une bordure pleine de 1 pixel à une image, on peut écrire comme ceci :

img {
  border: 1px solid #000;
}

Dans le code ci-dessus, on utilise la bordure attribut et définissez la largeur sur 1 pixel, le style sur uni et la couleur sur noir.

Ce qui suit est un exemple de code complet qui montre l'utilisation de six propriétés : hauteur, largeur, position, arrière-plan, transparence et bordure :

img {
  height: 200px;
  width: 200px;
  position: relative;
  left: 30px;
  background-image: url("example.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  border: 1px solid #000;
}

Summary

# 🎜🎜#Grâce aux paramètres CSS, vous pouvez ajouter plus de styles et d'effets aux images, rendant la page Web plus riche et plus vivante. Cet article présente six propriétés couramment utilisées : hauteur, largeur, position, arrière-plan, transparence et bordure, y compris des exemples de code et des rendus. Dans la pratique, il doit être appliqué de manière globale en fonction des besoins spécifiques de la conception Web afin de créer un site Web plus distinctif.

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!