Hogyan készítsünk egy feliratot a HTML fotón

Szöveget írunk a képen

Általában maga a kérdés könnyű. Nincs semmi ravasz, hogy egy blokkot rendezzen, egy másik tetején. De még mindig van néhány perc, méltó a vita. Azt hiszem, lesz az emberek, akik érdeklődnek.

Az ötlet az, hogy egyszerűen alkalmazzon szöveget a képen. A szöveget változó hosszúságú blokkok formájában mutatjuk be, feltételezzük, hogy a bal oldalon található, sima kitöltéssel a szöveg körül. Például, mint ebben a képen:

Dokumentumrendszer

Html jelölés

Persze, hogy könnyebb lenne használni a div elem a kimeneti kép, mint a háttér minta, de ebben az esetben azt feltételezzük, hogy a kép tartalmát a dokumentumot, és ezért tartozik HTML. A Div elem tartályként kerül felhasználásra a szöveg abszolút elhelyezéséhez.

CSS

Tehát közvetlenül a képen helyeztük el a szöveget. Következő feladatunk a szöveg háttérképe. Mivel a H2 elem egy blokkelem, nem használhatjuk ezekre a célokra. Az Inline Element Span használjuk. Csomagolja be az informatikai szöveget a címben.

Ezt a SPAN-t használjuk a szövegtervezéshez és a háttérhez:

Problémák

Amint az az ábrán látható, a karakterlánc végén, a szövegblokk közvetlenül a karakterlánc utolsó karaktere után végződik, és azonnal elindul a bal szélen a következő sorban. A span-A ingatlanpárnázás ebben az esetben nem segít nekünk.

A probléma megoldásához további kiterjedést kell használnia a BR / Tag mindkét oldalán, ebben az esetben használhatjuk a padding-ohmot.

Ez az új span-am lesz a feladat a padding tulajdonság:

Mi a szemantika?

Ebben a szakaszban a tervezés befejeződött, de az egyik probléma maradt. Nevezetesen, egy hatalmas számú további HTML elem hozzáadva csak a tervezéshez. Úgy értem span-s. A probléma megoldásához használja a jQuery-t. Ehhez távolítsa el a jelölést a jelölésben, és dinamikusan add hozzá:

Példa

Kilátás