Писање текста (са полу-транспарентна позадина) преко слике

Ефекат који је сасвим уобичајено да виде сајтове и блогове следеће генерације, су написани у тзв преклапање преко слике, често праћен тамне провидне позадине. Ево једног примера:

У овом чланку ћемо направити замену наших слике користећи ЦСС.

Прва ствар коју треба учинити је да направите ХТМЛ структура изгледа овако:

 <див цласс="бокимг">



  



 <имг бордер="0" срц="трамонто.јпг"/>



  



 <див цласс="боктесто">



    



 <спан цласс="тесто"> леп залазак сунца </ спан>!



  



 </ Див>







 </ Див>

Као што можете видети ја створио ДИВ контејнера (у класи "Бокимг.") У оквиру које сам место моје имиџ и нови див (са класе "Боктесто.") Који заузврат садржи распон који означава текст који желите да примените .

Хајде да сада видимо ЦСС да, материјално, радном месту:

 Бокимг. {



  



 позиција: релативна;



  



 ширина 400пк; / * Исто ширину слике * /



  



 висина: 300пк; / * иста слика висина * /







 }







 {Див.боктесто



  



 позиција: апсолутна;



  



 дно: 0пк;



  



 лево: 0пк;



  



 Ширина: 100%;



  



 бацкгроунд: ргб (0, 0, 0);



  



 у позадини: РГБА (0, 0, 0, 0,6);







 }







 {Спан.тесто



  



 паддинг: 10пк;



  



 цолор: # ФФФФФФ;



  



 фонт: болд Хелветица 24пк/45пк, санс-сериф;



  



 леттер-спацинг:-1пк;







 }

Кутија за одлагање ("Бокимг.") Је исте величине и релативног позиционирања на слику која је намењена за смештај.
Кутија за одлагање текста ("Боктесто.") Је фокус нашег рада је апсолутно позиционирање, који уклања из нормалног тока елемената и налази се у доњем левом углу њене посуду и очигледно има ширину 100% да се хоризонтално заузимају читав простор. Интересантно је, дакле, две дефиниције позадини користе РГБ и РГБА отуда служе да дефинишу тамној позадини и полу-транспарентан.
Век "Текст"., На крају, има једини циљ да стилизовати текст и примените мало 'пуњење.

• <<
• 1
• 2
• >>