Kuinka luoda: hero-kuvia

Opi, kuinka luoda hero-kuvia CSS:n avulla.

Hero-kuvat ovat suuria kuvia, joissa on teksti, ja ne sijoitetaan yleensä sivun ylimmälle:

Kokeile itse

Kuinka luoda hero-kuvia

Ensimmäinen vaihe - Lisää HTML:

<div class="hero-image">
  <div class="hero-text">
    <h1>Olen Bill Gates</h1>
    <p>Ja olen valokuvaaja</p>
    <button>Palkkaa minut</button>
  </div>
</div>

Toinen vaihe - Lisää CSS:

body, html {
    korkeus: 100%;
}
/* Hero-kuvan määrittely */
.hero-image {
  /* Lisää tumma taustavaikutus kuvalle (photographer.jpg) käyttämällä "lineaarinen-vaikutus". Tämä tekee tekstistä helpommin luettavaa */
  background-image: lineaarinen-vaikutus(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
  /* Määritä erityinen korkeus */
  korkeus: 50%;
  /* Aseta kuva sijaintiin ja keskitä, jotta se skaalautuu hyvin kaikilla näytöillä */
  background-position: keskelle;
  background-repeat: ei-toistu;
  background-size: cover;
  position: relative;
}
/* Sijoita teksti kuvan keskelle */
.hero-text {
  tekstiasento: keskelle;
  position: absolute;
  ylä: 50%;
  vasen: 50%;
  transform: siirrä(-50%, -50%);
  color: white;
}

Kokeile itse