Kahraman Resmi Nasıl Oluşturulur

CSS kullanarak kahraman resmi oluşturma yöntemini öğrenin.

Kahraman resmi, genellikle web sayfasının üstünde yer alan metin içeren büyük bir görseldir:

Kendi kendine deneyin

Kahraman Resmi Nasıl Oluşturulur

İlk Adım - HTML Ekle:

<div class="hero-image">
  <div class="hero-text">
    <h1>Ben Bill Gates'im</h1>
    <p>Ve Ben Bir Fotograf</p>
    <button>İşe Al</button>
  </div>
</div>

İkinci Adım - CSS Ekle:

body, html {
    height: 100%;
}
/* Kahraman resmi */
.hero-image {
  /* "linear-gradient" kullanarak resme (photographer.jpg) koyu arka plan efekti ekleyin. Bu, metni okumayı daha kolay hale getirecektir */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("photographer.jpg");
  /* Belirli bir yükseklik ayarla */
  height: 50%;
  /* Resmi konumlandır ve ortala, böylece tüm ekranlarda iyi ölçeklenebilir olabilsin */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
/* Metni resmin ortasında yerleştir */
.hero-text {
  text-align: center;
  position: absolute;
  üst: 50%;
  sol: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

Kendi kendine deneyin