Πώς να δημιουργήσετε: κείμενο στην εικόνα

Μάθετε πώς να τοποθετήσετε κείμενο σε εικόνα.

Πώς να τοποθετήσετε κείμενο μέσα σε εικόνα

Πρώτος βήμας - Προσθήκη HTML:

<div class="container">
  <img src="nature.jpg" alt="Norway" style="width:100%;">
  <div class="text-block">
    <h4>Wuhan</h4>
    <p>Τι υπέροχη πόλη! Θαυμάζω την πόλη αυτή!</p>
  </div>
</div>

Δεύτερος βήμας - Προσθήκη CSS:

/* θυρίδα που περιέχει εικόνες και κείμενο */
.container {
  position: relative;
}
/* κείμενο κάτω αριστεράς */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

Προσπαθήστε από μόνοι σας

Σελίδες σχετικές

Εκμάθηση:CSS εικόνα

Εκμάθηση:CSS τοποθέτηση