Nasıl oluşturulur: Şeffaf metinli görsel

CSS kullanarak şeffaf (yarı şeffaf) arka planlı metinli görseli nasıl oluşturulur öğrendiğiniz.

Şeffaf görsel metin

Norway
Yazı Başlığı

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

kendiniz deneyin

Şeffaf görsel metni nasıl oluşturulur

İlk adım - HTML ekleyin：

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Yazı Başlığı</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

İkinci adım - CSS ekleyin：

.container {
  position: relative;
  max-width: 800px; /* Azami genişlik */
  margin: 0 auto; /* Ortaya yerleştirin */
}
.container .content {
  position: absolute; /* Arka plan metnini konumlandırma */
  bottom: 0; /* Altta. Üstüne yapıştırmak için top:0 kullanın */
  background: rgb(0, 0, 0); /* Geri bildirim rengi */
  background: rgba(0, 0, 0, 0.5); /* Şeffaflık derecesi 0.5 olan siyah arka plan */
  color: #f1f1f1; /* Gri metin */
  width: 100%; /* Tam geniş */
  padding: 20px; /* Bazı iç boşluklar */
}

kendiniz deneyin