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.
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:
- Mondja meg a legjobb html webhelykészítőt
- A Photoshop átviheti egyik képet a másikra
- Hogyan készítsünk jó képet TOP-10 tipp
- Vellaton színpaletta
- Zsinórfonás közepes haj típusú fonatokra