Bir resim üzerine metin (yarı saydam arka plan ile) yaz

Bir siteleri ve bloglar nesil sonraki, genellikle koyu saydam arka plan ile birlikte, görüntüler üzerinde sözde kaplama yazılmış olduğunu görmek için oldukça yaygın bir etki. İşte bir örnek:

Bu yazıda CSS kullanarak görüntülerin üzerine olun.

Yapılacak ilk şey, böyle bir HTML yapı yaratmaktır:

 <div class="boximg">



  



 border="0" src="tramonto.jpg"/> <img



  



 <div class="boxtesto">



    



 <span class="testo"> Güzel bir gün batımı </ p>



  



 </ DIV>







 </ DIV>

Gördüğünüz gibi benim görüntü konumu, içinde bir DIV konteyner (sınıf ile ". Boximg") ve sırayla uygulamak istediğiniz metni işaretleri bir yayılma içeren yeni bir div (sınıf ile ". Boxtesto") oluşturuldu .

Şimdi CSS, maddi, iş yerinde görelim:

 . Boximg {



  



 position: relative;



  



 width: 400px; / görüntünün * Aynı genişliği * /



  



 height: 300px; / * aynı görüntü yükseklik * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 bottom: 0px;



  



 sol: 0px;



  



 width: 100%;



  



 background: rgb (0, 0, 0);



  



 Arka plan: RGBA (0, 0, 0, 0,6);







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



 font: kalın 24px/45px Helvetica, Sans-Serif;



  



 letter-spacing:-1px;







 }

Saklama kutusu (". Boximg") aynı boyut ve barındırmak için tasarlanmıştır görüntü göre konumlandırma vardır.
Metin saklama kutusu (". Boxtesto") çalışmalarımızın odak unsurlarının normal akışını kaldırır ve kabı sol alt köşesine yerleştirilmiş ve belli ki% 100 bir genişlik vardır mutlak konumlandırma vardır yatay olarak tüm kullanılabilir alanı işgal etmek. İlginç, daha sonra, karanlık arka plan tanımlayabilir ve yarı şeffaf hizmet rgb ve rgba kullanarak arka plan iki tanım.
Kapsar. "Metin", son olarak, metin stilize ve küçük bir 'dolgu uygulamak için tek amacı vardır.

• <<
• 1
• 2
• >>