A képet HTML és CSS szöveggel burkoljuk be

Előző

Gyors navigáció az oldalon:

  • A probléma általános megoldása
  • Tömeges alkalmazás az összes képhez
  • A szöveget ráhelyezzük a képre

Az összes tárgy helyes és szép elhelyezése az oldalon minden önbecsülő webhely tervezésének szerves eleme. Mint mindig, a CSS itt is nélkülözhetetlen. Az a helyzet, hogy a kép becsomagolása HTML szöveggel magától megtörténik (az img tag align=left, align=right attribútumai segítségével), de nem hoz létre behúzást. Ezért nem nélkülözheti a CSS-t.

burkoljuk

A probléma általános megoldása

CSS? Több módszert is tudok a probléma megoldására.

Így például elhelyezhető egy kép egy DIV címkében, amelyhez a float:left vagy float:right tulajdonság állítható be CSS segítségével, a szükséges behúzásokkal.

De nem ezt a módszert mondanám a leghelyesebbnek - miért kell plusz címkét beletenni a dokumentumba, ha a probléma kizárólag az IMG tag keretein belül megoldható?

Ez ugyanazon tulajdonságok hozzárendelésével történik: float, amely az igazításért, és margó, amely a behúzásokért felelős.

Először is rendeljünk egy osztályt a képünkhöz:

Most írjuk fel a megfelelő CSS-tulajdonságokat - tegyük fel, hogy a képünk a bal oldalon lesz:

.img_class { lebegés: balra; margó: 10px 10px 10px 0; }

A margó tulajdonságra azért van szükség, hogy beállítsuk a szöveg behúzását a képből – különben közel simul hozzá, ami nem lesz túl szép. Egyúttal felül, jobb és alul helyezzük el őket, és a bal margót nullára állítjuk, mivel maga a kép lesz a bal oldalon.

Tömeges alkalmazás az összes képhez

Ha azt szeretné, hogy a dokumentumban minden kép balra legyen igazítva, akkor ez a kérdésazonnal megoldható annak az oldalnak a blokkjának (elemének) a szintjén, amelyben elhelyezkednek - nehogy minden alkalommal előírják a képhez az osztályt. Még egy kis közlekedési megtakarítás is megéri.

Tegyük fel, hogy a képek benne vannak a bejegyzésben, amely a webhelyed oldalán jelenik meg a nyelven.

Ebben az esetben elegendő a következő kódot beírni webhelye CSS-fájljába:

.content img { lebegés: balra; margó: 10px 10px 10px 0; }

Most a "tartalom" blokkban lévő összes kép balra lesz igazítva, és a fenti behúzásokkal rendelkezik. Ha kivételt szeretne tenni néhány egyedi kép esetében - például helyezze el jobbra, akkor be kell állítania egy azonosítót (például id=»my_img»), és be kell írnia a következő paramétereket a css fájlba (hash jellel kell kezdődnie - #):

#my_img { lebegés: jobbra; margó: 10px 0 10px 10px; }

A szöveget ráhelyezzük a képre

Néha szükséges, hogy a szöveget közvetlenül a képre írják, például gyakran jó nagy képet készíteni a cikkhez, és ráírni a cikk címét vagy valamilyen megjegyzést.

Ismétlem, ennek számos módja van. Megmutatom a két legnépszerűbbet.

Először is létrehozhat egy blokkot, amelybe a szöveg kerül, és a kép ennek a blokknak a háttereként fog működni:

A képre ráhelyezett szöveg

.my_block { háttér: url (my_img.jpg) bal felső sarokban nincs ismétlés; szélesség: 500 képpont; magasság: 300 képpont; kitöltés: 400 képpont 0 0 0; }

Ebben a blokkban a szövegsor a blokk aljára kerül – 400 képpontos felső margóval.

Ez a módszer különösen alkalmas olyan tervezési elemekhez (sapka, webhelylogó), amelyekben a kép és a szöveg méreteírott.

Egy másik módszer, hogy két blokkot készítünk (az egyik képpel, egy szöveggel), és az egyiket a másikra helyezzük a megadott paraméterek szerint. A módszer nagy előnye, hogy beállíthatja a hátteret (beleértve az áttetszőséget is) a szövegblokkban:

A képre ráfedendő szöveg

.img { szélesség: 500 képpont; magasság: 300 képpont; pozíció: relatív; .text { háttérszín: #FFF; szélesség: 500 képpont; magasság: 50 képpont; pozíció: abszolút; balra: 0px; felül: 450 képpont; }

Az adott példában az egyik blokkot a másikba helyeztük a pozíció tulajdonság segítségével – a szöveget tartalmazó blokk fehér hátterű lesz, és a kép alján található.

Amint látja, nincs semmi nehéz a klipek becsomagolásában és a szövegek rárakásában, a lényeg az, hogy kísérletezzen és válassza ki a legsikeresebb lehetőséget!

Következő

Olvassa el tovabba: