Styles d'image CSS

Apprenez à utiliser les styles d'image CSS.

Image arrondie

Utilisez border-radius Créez une image arrondie avec l'attribut

Exemple

Image arrondie :

img {
  border-radius: 8px;
}

Essayez-le vous-même

Exemple

Image circulaire :

img {
  border-radius: 50%;
}

Essayez-le vous-même

Image miniature

Utilisez border Créez une miniature avec l'attribut.

Miniature :

Coffee

Exemple

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
<img src="paris.jpg" alt="Paris">

Essayez-le vous-même

comme miniature du lien :

Exemple

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

Essayez-le vous-même

Images responsives

Les images responsives s'ajustent automatiquement pour s'adapter à la taille de l'écran.

Si vous souhaitez réduire l'image selon les besoins mais éviter de l'agrandir au-delà de la taille originale, ajoutez le code suivant :

Exemple

img {
  max-width: 100%;
  height: auto;
}

Essayez-le vous-même

Astuce :Dans nos Tutoriel CSS RWD Apprenez plus sur la conception Web responsive dans nos

Centrer l'image

Pour centrer l'image, définissez les marges extérieures gauche et droite sur auto et le définir comme élément en bloc :

Coffee

Exemple

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

Essayez-le vous-même

Photo Polaroid / Carte

Tulip

Tulipe jaune

Tulip

Tulipe rouge

Exemple

div.polaroid {
  width: 80%;
  background-color: white;
  ombre de boîte: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {largeur: 100%}
div.container {
  alignement de texte: center;
  marge: 10px 20px;
}

Essayez-le vous-même

Image transparente

opacité La valeur de l'attribut se situe entre 0.0 et 1.0. Plus la valeur est basse, plus l'image est transparente :

Tulip

opacité 0.2

Tulip

opacité 0.5

Tulip

opacité 1 (par défaut)

Exemple

img {
  opacité: 0.5;
}

Essayez-le vous-même

Texte d'image

Comment positionner du texte dans une image :

Exemple

CodeW3C.com Logo
En bas à gauche
En haut à gauche
En haut à droite
En bas à droite
Centré

Essayez-le vous-même :

En haut à gauche En haut à droite En bas à gauche En bas à droite Centré

Filtre d'image

CSS filtre Les attributs ajoutent des effets visuels (comme le flou et la saturation) aux éléments.

Attention :Internet Explorer ou Edge 12 ne prennent pas en charge l'attribut filter.

Exemple

Changer la couleur de toutes les images en noir et blanc (100% gris) :

img {
  filtre: gris(100%);
}

Essayez-le vous-même

Astuce :Veuillez visiter notre Guide de référence des filtres CSSPour plus d'informations sur les filtres CSS.

Superposition d'image au survol

Créer un effet superposé au survol de la souris :

Exemple 1

Texte淡入 :

Avatar
Hello World

Essayez-le vous-même

Exemple 2

Boîte de淡入 :

Avatar
Bill

Essayez-le vous-même

Exemple 3

Glisser vers le haut :

Avatar
Hello World

Essayez-le vous-même

Exemple 4

Glisser vers le bas :

Avatar
Hello World

Essayez-le vous-même

Exemple 5

Glisser vers la gauche :

Avatar
Hello World

Essayez-le vous-même

Exemple 6

Glisser vers la droite :

Avatar
Hello World

Essayez-le vous-même

Inverser l'image

Veuillez déplacer le curseur sur l'image :

体育公园

Exemple

img:hover {
  transform: scaleX(-1);
}

Essayez-le vous-même

Bibliothèque d'images responsive

Nous pouvons créer une bibliothèque d'images adaptative en utilisant CSS.

Dans cet exemple, nous utilisons les requêtes média pour réorganiser les images selon les tailles d'écran différentes. Veuillez ajuster la taille de la fenêtre du navigateur pour voir l'effet :

Exemple

.responsive {
  marge: 0 6px;
  flottant: gauche;
  largeur: 24.99999%;
}
@media only screen and (max-width: 700px){
  .responsive {
    largeur: 49.99999%;
    marge: 6px 0;
  }
}
@media only screen and (max-width: 500px){
  .responsive {
    width: 100%;
  }
}

Essayez-le vous-même

Astuce :Veuillez consulter nos Tutoriel CSS RWD Apprenez plus sur la conception de site web réactif sur

Fenêtre modale d'image (Image Modal)

C'est un exemple de la manière dont CSS et JavaScript collaborent.

Tout d'abord, créez une fenêtre modale (dialogue) en utilisant CSS et cachez-la par défaut.

Ensuite, lorsque l'utilisateur clique sur l'image, utilisez JavaScript pour afficher une fenêtre modale et affichez l'image à l'intérieur :

绿茵场

Essayez-le vous-même