Positionner le texte sur une image avec CSS

Jay Singh 20 février 2023

CSS CSS Alignment

Positionner le texte sur une image avec CSS

Des textes peuvent être ajoutés aux photos sur une page Web dans certains cas, et des légendes d’image peuvent être créées à partir du texte de l’image. Le texte ne peut pas être placé sur une image en utilisant uniquement des composants HTML.

Les attributs CSS seront requis pour cela. Ce tutoriel montrera comment positionner du texte sur une image avec CSS.

Positionner le texte sur une image avec CSS

Le texte sur l’image peut être positionné à l’aide de l’attribut de position CSS. Pour ce faire, fournissez l’image position:relative et le texte position:absolute.

Dans un élément <div>, ajoutez les deux composants. Nous pouvons utiliser les propriétés top, bottom, left et right pour positionner le texte sur l’image à un certain emplacement.

Code:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  text-align: center;
  color: blue;
}
.bottom-left {
  position: absolute;
  bottom: 5px;
  left: 12px;
}
.top-left {
  position: absolute;
  top: 5px;
  left: 12px;
}
.top-right {
  position: absolute;
  top: 5px;
  right: 12px;
}
.bottom-right {
  position: absolute;
  bottom: 5px;
  right: 12px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Image Text</h2>
<p>How to place text over an image:</p>

<div class="container">
  <img src="/img/DelftStack/logo.png" alt="DelftStack Logo" style="width:100%;">
  <div class="bottom-left">Left Bottom</div>
  <div class="top-left">Left Top</div>
  <div class="top-right">Right Top</div>
  <div class="bottom-right">Right Bottom</div>
  <div class="centered">Center</div>
</div>
</body>
</html>

Voici un autre exemple de positionnement du texte sur une image avec CSS.

Code:

<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
    .container {
      position: relative;
    }
    .text {
     position: absolute;
     color: white;
     top: 5px;
    }
</style>
</head>
<body>
    <h2> Positioning the text over image</h2>
    <div class="container">
     <img src="/img/DelftStack/logo.png" alt="DelftStack Logo">
     <h4 class="text"> Add any text to the image </h4>
    </div>
</body>
</html>

Positionner le texte sur une image avec CSS

Article connexe - CSS Alignment