Hogyan írjunk szöveget a kép fölé css
. A korai szakaszaiban a nyelvtanulás HTML, CSS, stb jelenik meg (mint amilyennek lennie kellene) kérdés: hogyan lehet megtenni, vagy úgy, és ebben a tekintetben, hogyan kell írni a szöveget a kép fölé. Ez egy természetes kifejeződése az érdeklődés, és előírja megerősítése tudás ezen a területen. De ahhoz, hogy ezt a feladatot, akkor tudnia kell legalább egy kis részét CSS, hogy megértsék az alapvető tulajdonságait lépcsőzetes.
Ténylegesen elvégzi az írás a szöveg fölött a kép nem olyan nehéz. Majdnem kész rovására a helyzet ingatlan és attribútumok, és akkor van egy regisztrációs maga a szöveg. Meg lehet próbálni, hogy másképp csinálják, például, meg a tartalmazó div háttérben ugyanakkor meg a kép, amelyen a szöveg kell helyezni.
Ez a módszer azonban korlátozza a lehetőségeket, és a nagyon használata szöveges felett képeket. Ezért a legjobb megoldás az lenne, hogy a pozíció tulajdonság. Ez az elem jelentős előnyt és teljes mozgásszabadságot ezen a területen, ez a terület jelzi a helyzetét tulajdonság: relative;. Ellenkező esetben a helymeghatározás kerül sor vonatkozásában a böngészőt.
Vegyük az első példa.
Magyarázat. Fő egység van hozzárendelve érték position: relative; ez azt jelenti, a terület szabad elhelyezésének későbbi elemek ebben az osztályban.
Ezután formátumban div lineárisan blokkolja kijelző elem: inline-block;
És az utolsó dolog, amit meg kell figyelni - ez position: absolute;. set elem .
Más stílusok mind formázott szöveget.
A második példában használjuk hosszabb feliratot a képre, és Styling rendesen.
Nos, ez a balszerencse, használtuk a kulcsszó
- sortörést és a kapott eredményeket a különbség az üres. Ez látható a példa, ahol a szöveg élek és szűk megjelenése nem túl szép.
Helyes ez a hiba is különböző lehet. Alkalmazni, például nem törhető szóköz nbsp. amely lehetővé teszi, hogy növelje a távolságot.
A második módszer alkalmazható tag ... ő, mint egy csak kevesebb zsírt, de igazán eltávolítani.
A stílusok hozzá egy új tulajdonság white-space: nowrap; A szöveg egy sorban. Ez minden, azt hiszem, nincs semmi bonyolult.
Lásd még:
CSS hatások gombok
Hogyan lehet több CSS háttérképek
CSS gombra. Rövid utasítás példák
Dugó létrehozni galéria WordPress