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

Μάθετε πώς να χρησιμοποιήσετε το CSS για τη δημιουργία εικόνας ήρωα.

Η εικόνα ήρωα είναι μεγάλη εικόνα με κείμενο, που συνήθως τοποθετείται στην κορυφή της ιστοσελίδας:

Δοκιμάστε το προσωπικά

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

Βήμα 1 - Προσθέστε HTML:

<div class="hero-image">
  <div class="hero-text">
    <h1>Είμαι ο Bill Gates</h1>
    <p>Και είμαι ένας Φωτογράφος</p>
    <button>Αναθέστε μου</button>
  </div>
</div>

Βήμα 2 - Προσθέστε CSS:

σώμα, html {
    ύψος: 100%;
}
/* Εικόνα ήρωα */
.hero-image {
  /* Χρησιμοποιήστε "linear-gradient" για να προσθέσετε το σκοτεινό φόντο στην εικόνα (photographer.jpg). Αυτό θα καθιστήσει το κείμενο πιο εύκολα ανάγνωστο */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
  /* Ορισμός συγκεκριμένου ύψους */
  ύψος: 50%;
  /* Προσθέστε την εικόνα και κεντρώστε την, ώστε να κλιμακώνεται καλά σε όλες τις οθόνες */
  θέση υποβάθρου: κέντρο;
  ανάπτυξη υποβάθρου: χωρίς επανάληψη;
  μέγεθος υποβάθρου: καλύπτει;
  θέση: σχετική;
}
/* Βάλτε τον κείμενο στο μέσο της εικόνας */
.hero-text {
  text-align: κέντρο;
  θέση: αβστικό;
  top: 50%;
  αριστερά: 50%;
  transform: μετατρέψω(-50%, -50%);
  χρώμα: λευκό;
}

Δοκιμάστε το προσωπικά