Napisz tekst (w tle półprzezroczyste) na obrazku

Efekt, który jest dość często można zauważyć witryn i blogów nowej generacji, są zapisane w tzw nakładki na obrazy, często towarzyszy ciemnym tle przezroczyste. Oto przykład:

W tym artykule robimy nadpisywanie naszych obrazów za pomocą CSS.

Pierwszą rzeczą do zrobienia jest stworzenie struktury HTML tak:

 <div class="boximg">



  



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



  



 <div class="boxtesto">



    



 <span class="testo"> piękny zachód słońca! </ span>



  



 </ Div>







 </ Div>

Jak widać stworzyłem kontener DIV (z klasy ". Boximg"), w którym I miejsce mój wizerunek i nowe div (z klasy ". Boxtesto"), które z kolei zawiera zakres, który oznacza tekst, który chcesz zastosować .

Zobaczmy teraz, CSS, że istotnie, w miejscu pracy:

 . Boximg {



  



 position: relative;



  



 width: 400px; / * Te same szerokość obrazu * /



  



 height: 300px; / * W tym samym wysokość obrazu * /







 }







 {Div.boxtesto



  



 position: absolute;



  



 bottom: 0px;



  



 left: 0px;



  



 width: 100%;



  



 background: rgb (0, 0, 0);



  



 background: rgba (0, 0, 0, 0,6);







 }







 {Span.testo



  



 padding: 10px;



  



 color: # FFFFFF;



  



 font: bold 24px/45px Helvetica, sans-serif;



  



 letter-spacing:-1px;







 }

Schowek (". Boximg") ma taki sam rozmiar i pozycjonowanie względne do obrazu, który ma pomieścić.
Schowek w tekście (". Boxtesto") jest w centrum naszej pracy pozycjonowanie absolutne, które usuwa go z normalnego przepływu elementów i jest umieszczony w lewym dolnym rogu jego opakowanie i oczywiście ma szerokość do 100% , aby zajął całą dostępną przestrzeń w poziomie. Ciekawe więc, dwie definicje tle przy użyciu rgb i rgba, które służą do określenia ciemnym tle i półprzezroczyste.
Rozpiętość. "Text", wreszcie, ma jedynie na celu do stylizacji tekstu i zastosowanie trochę "padding.

• <<
• 1
• 2
• >>