Képaláírásokat képeket HTML és CSS
A vorstke gyakran kell dolgozni a képeket. Nem keretében létre ezek segítségével dekoráció, azaz képeket, mint a képek. És néha a tervezők szeretnek kitalálni különböző módon tervezni képaláírásokat képeket, elrendezése, amelyet nehéz kezdőknek. Ebben a cikkben megpróbálom megnyitni az egyik módja a bevezetését aláírásokat képeket.
Tehát azt szeretnénk, hogy az eredmények az 1. ábrához hasonló.
1. ábra Forrás képet
Ehhez meg kell írni itt html-kód:
Eddig minden egyszerű: csavarja a képet a blokk a kép alatt leforgása alatt szerepel az ő aláírása. Recepció maga alapul hozzátéve, hogy az elem az aláírást tartalmazó (ebben az esetben - a span), abszolút pozicionálás és elrendezése az alsó, ami lehetővé teszi, hogy nyúlik a szöveg elem nem lefelé és felfelé. De ez minden eleme helyes viselkedésre, akkor regisztrálnia kell néhány stílusok és képek, és átalakító egység. Tehát, sorrendben.
Mivel mi fog terjedni az abszolút, hogy a burkolat meg kell adni position: relative. és adja meg a szélességet.
A kép kellene kényszeríteni, hogy egy blokk, hogy távolítsa el a felesleges padding alattunk, és távolítsa el a keretet az IE.
De írunk span legfőképpen stílusok:
- tesszük egység
- Kérdezi padding a szöveg nem tapadnak a szélek
- Kérdezi kénytelen szélessége (ne felejtsük el, hogy csökkentsék azt a szélessége padding'a)
- Tesszük abszolút pozicionálás és a „ragasztó”, hogy az alján a burkolat blokk, amely a leginkább vizuálisan és a kép alján
- Kérdezi továbbá a háttér színe, az átláthatóság (12. cikke alapján egyszerű és hasznos módszerek) előkészíti szöveges feliratok ízlés
Így a legfontosabb dolog - ezek az első öt tulajdonságait. A többi meg lehet változtatni a design, mint szeretné tetszése. Az eredmény egy ilyen oldalt:
Megjegyzés szélesség átalakító blokk, és a blokk képet a nevet, tekintettel padding egyenlőnek kell lennie!