Görsel üzerinde metin bloğu nasıl oluşturulur

Görsel üzerinde metin bloğu nasıl yerleştirilir öğrenin.

Görsel içinde metin bloğu nasıl yerleştirilir

ilk adım - HTML ekleyin:

<div class="container">
  <img src="nature.jpg" alt="Norway" style="width:100%;">
  <div class="text-block">
    <h4>Wuhan</h4>
    <p>Ne harika bir şehir! Onu seviyorum!</p>
  </div>
</div>

ikinci adım - CSS ekleyin:

/* görsel ve metni içeren konteyner */
.container {
  position: relatife;
}
/* sag alt köşe metni */
.text-block {
  position: absolut;
  alt: 20px;
  sag: 20px;
  background-color: siyah;
  color: beyaz;
  padding-left: 20px;
  padding-right: 20px;
}

kendinizin deneyin

ilgili sayfalar

ders:CSS resmi

ders:CSS konumlandırma