Hogyan készítsünk egy háttér HTML és CSS
Tehetek html jelent a háttérben?
Azt kell mondanom, hogy nem. Általában html nem jön létre, annak érdekében, hogy dolgozzon ki egy internetes oldalon. Ez csak nagyon kényelmetlen. Például, van egy bgcolor tulajdonság, mellyel a háttér színét, de nagyon kellemetlen.
Ennek megfelelően fogjuk használni a Cascading Style Sheets (CSS). Sokkal több a lehetőségek a háttérrel. Ma elemzik a legalapvetőbb.
Hogyan kell beállítani a háttérben a css?
Tehát először is meg kell határoznia a sorrendben kívánt elem adja a hátteret. Azaz, meg kell találnunk a választó, amelyre írunk a szabályt. Például, ha be kell állítani a háttérben az egész oldal egészének, akkor lehet, hogy a választó testület minden blokk - keresztül a szelektor div. Nos, stb Háttér lehet és kell kötni más szelektor: stilisztikai osztályok, azonosítók, stb
Miután úgy döntött, egy választó, meg kell írni a nevét, maga az ingatlan. Ahhoz, hogy a háttér színét (ez egy egyszínű nélkül színátmenetek és képek) alkalmazásával background-color tulajdonság. Miután van szükség, hogy egy kettőspont és írjon a szín is. Ezt meg lehet tenni a különböző módon. Például, ha a kulcsszavak, hex-formátum RGB RGBA, hlc. Bármilyen módszert is megteszi.
A leggyakrabban alkalmazott módszer a hexadecimális kódot. Mert színválasztékban használhatja a programot, amelyben a szín kód látható. Például photoshop, festék vagy más online eszköz. Ennek megfelelően például előírhat általános háttér minden weboldalakat.
Ezt a kódot kell beilleszteni a osztályvezető. Fontos, hogy a fájlok egy mappában.
Nos, ahogy haladunk tovább. Hogy mutassa meg más lehetőségeket a háttér, van, hogy hozzon létre egy kis egység, amelyben fogunk kísérletezni a háttérképet. Igen, ez a kép.
Háttérkép, mint háttér
Képként fogom használni egy kis html nyelv ikont:
Hozzon létre egy üres blokkot a azonosítója:
Kérd meg, hogy törölje a méret és a háttér:
Ebből kódot, akkor láthatjuk, hogy én egy új funkció - background-image. Célja csak beszúrni a képet, mint a háttér html-elem. Lássuk, mi történt:
A kép beállításához meg kell írni egy kettőspont után a kulcsszó url No, majd zárójelben a fájl elérési útját. Ebben az esetben a pálya azon a tényen alapul, hogy a kép ugyanabban a könyvtárban, mint a HTML dokumentum. Azt is meg kell adnia a képformátum.
Ha ezt megtette, és a készülék még mindig nem jelenik meg újra átvilágítás hogy van-e írva a neve a kép, akár megadott útvonal és kiterjesztése rendesen helyesen. Ezek a leggyakoribb oka, hogy egyszerűen nem jelenik meg háttér, mert a böngésző nem találja a képet.
De még észre az egyik jellemzője? A böngésző vett egy képet, és megszorozva az egész blokk. Úgy, hogy tudod, hogy ez a viselkedés az alapértelmezett háttér képek - azok ismételt vízszintesen és függőlegesen, amíg az ideje, amíg nem kúszik be a blokk. Szerint ezt a viselkedést, akkor könnyen kezelheti. Ehhez használja a background-repeat tulajdonság, amely 4 alapvető értékeket:
Ismétlés - az alapértelmezett beállítás, a kép ismétlődik mindkét oldalán;
Repeat-x - megismételtük OIC x;
Ismétlés-y - ismétli csak tengelyirányban y;
No-repeat - nem kell megismételni egyáltalán
Minden érték lehet regisztrálni, és meglátjuk, mi történik. Azt írják az alábbiak szerint:
Most egy ismétlés csak vízszintesen. Ha írnak no-repeat lenne csak egy kép.
Kiváló, ez már lehet befejezni, mivel ez az alap képes dolgozni a háttérben, de én megmutatom további 2 ingatlan, amely lehetővé teszi, hogy minél több lehetőséget kell kezelni.
Megismétlésével elrendezés korábban elért, hogy hozzon létre háttér textúra színátmenetek és használatával egy apró képet. Ez lehet a 30 10 pixel, vagy annál kevesebb. És talán még egy kicsit. A fényképek volt, hogy mikor ismétlődik egy vagy akár mindkét oldalon, nem volt látható átmeneteket, aminek következtében egy darab kapott háttérben. By the way, ez a megközelítést kell alkalmazni, és most, ha a használni kívánt, zökkenőmentes textúra a honlapján, mint a háttér. A gradiens most már lehetséges, hogy végre módszerek CSS3, róla még biztosan beszélni.
háttérpozíció
Alapértelmezésben egy háttérképet, ha nem állít be ismétlés neki lesz a bal felső sarokban a blokk. De a helyzet könnyen módosítható a tulajdonság background-position.
Kérdezi, hogy eltérő lehet. Az egyik lehetőség az, hogy egyszerűen adja meg a részt, ahol a kép legyen:
Azaz függőlegesen minden maradt: a háttérképet a tetején, de már megváltozott a vízszintes oldala a jobb oldalon, hogy igaza van. Egy másik módja, hogy állítsa be a helyzet - százalékában. Számolás kezdődik ez minden esetben a bal felső sarokban. 100% - a teljes egységet. Tehát, hogy a kép pontosan a közepén, így tudjuk írni:
Ne feledje, egy fontos dolog társított helymeghatározás - az első paramétert mindig vízszintes helyzetben, és a második - függőlegesen. Tehát, ha úgy látja, az érték 80% -ról 20%, akkor azonnal megállapítható, hogy a háttérkép lesz jelentősen jobbra tolódott, de le ugyanabban az időben erősen nem megy el.
Végül, akkor regisztrálja a helyzet a pixel. Minden ugyanaz, csak ahelyett% -os px. Bizonyos esetekben szükség lehet, és az ilyen elhelyezése.
gyorsírás
Ön egyetért azzal, hogy a kódok meglehetősen nehézkes, ha minden kérni, mint mi. Kiderült, és az utat a kívánt képet adja, és az ismétlés, és helyzetét. Természetesen az ismétlés és a helyzet nem mindig szükséges, de minden esetben egy helyes a rövid tulajdonság. Úgy néz ki, mint ez:
Ez az első dolog az, hogy rögzítse az összes szilárd háttér színét, ha szükséges. Ezután az elérési utat a képet, és az ismétlés a pozíció. Ha egy paramétert nem szükséges, egyszerűen kihagyja. Elfogadom így sokkal gyorsabb és kényelmesebb, de mi jelentősen csökkenti a kódot. Általában azt javasoljuk, hogy írja le a rövid idő alatt, akkor is, ha csupán a színt vagy képet.
Következő nézzük meg egy másik tulajdonság - a méret a háttérben. Ez már nem zadash rövidítve paraméterek gyorsírás.
Mi irányítjuk a méret a háttérképet
A jelenlegi kép nem jól lehet bizonyítani a következő trükk, hogy elviszem egy másik. A méret, ő legyen a blokk vagy nagyobb. Tehát, képzeljük el, hogy szembe a kihívással: ahhoz, hogy a háttérképet, hogy az kitöltse a csomag nem teljesen. Egy kép, például még nagyobb blokk méretet.
Hogyan tehetek ebben az esetben? Természetesen a legegyszerűbb és legésszerűbb megoldás az lenne, hogy egyszerűen csökkenti a kép, de nem mindig van lehetőség erre. Tegyük fel, hogy van a szerveren, és abban a pillanatban nincs idő és lehetőség, hogy csökkentse azt. A probléma megoldható a tulajdonság háttér méretű, amelyet nevezhetünk viszonylag új, és amely lehetővé teszi, hogy manipulálják a méret háttérképet, és általában bármely háttérben.
Tehát a kép most elfoglalja a teljes terület a blokk, de majd megkérem háttér Méret:
Ismét az első paraméter beállítja a méret a vízszintes, a második - függőlegesen. Látjuk, hogy mindent helyesen alkalmazta -Fotó mérete 80% -kal blokk szélessége széles és másfél magas. Ezután csak be kell tenni egy pontosítás - méretének beállításával százalékában, akkor befolyásolhatja a kép arányait. Ezért legyen óvatos, ha nem akarja, hogy zavarják az arányokat.
El tudod képzelni, mint a méret a háttér megadható pixelben. Még van két kulcsszavak értékeket is fel lehet használni:
Cover - fogja átméretezni a képet úgy, hogy legalább az egyik oldalán teljesen kitölti a blokk.
Tartalmaznak - lesz skála úgy, hogy a kép teljesen bejutni a készüléket maximális méretét.
Az előnyök ezeket az értékeket, hogy azok nem változtatják meg a kép arányait, így őket nem változott.
Azt is meg kell érteni, hogy nyúlik a kép romlásához vezethet a minőség. Tudok egy példát az élet és a tényleges gyakorlati DTP. Mindenki tudja és megérti, hogy a kényszerítő asztali alkalmazkodniuk kell a szélessége a hely mellett a fő monitoron: 1280, 1366, 1920. Ha az előírtnál a méret, mondjuk háttérképet 1280 200, és ne kérdezd meg background-méret, annál nagyobb a szélessége a képernyő egy üres hely, a kép nem teljesen kitöltik a szélességét.
Az esetek 99% -ában nem elégedett a web developer, ezért beállítja a háttér-size: fedél, hogy a kép mindig elérte a maximális szélessége az ablak. Ez egy jó módszer, hogy lehet használni, de most szembesülnek azzal a problémával, hogy a felhasználók a képernyő szélessége 1920 pixel lehet látni a képet a szuboptimális minőségét.
Emlékeztetem önöket, akkor elérte a maximális szélesség. Ennek megfelelően, a minőség automatikusan rosszabb. Az egyetlen megoldás az, hogy az eredeti kép nagyobb - 1920 pixel széles. Aztán a legszélesebb képernyőn lesz a természetes méretét, míg mások egyszerűen csak fokozatosan lehet vágni, de ugyanakkor, a megfelelő kiválasztása a háttérkép, ez nem befolyásolja a megjelenését az oldalon.
Általában ez csak 1 példa arra, hogyan kell használni a megszerzett tudás az Ön által ezt a cikket, közben az elrendezés a tényleges elrendezése.
Félig átlátszó háttér használatával CSS
Másik jellemzője, hogy meg lehet valósítani a CSS - áttetsző háttérrel. Ez azt jelenti, ezen keresztül háttérrel lehetséges lesz, hogy mi van mögötte.
Például, kérem az egész oldal háttérképet, amit használnak a korábbi példákban. Blokk azonos azonosítóval bg, ahol tölteni az összes Kísérleteink szerepel háttérszín használatával RGBA adja meg a formátumot.
Az első érték a zárójelben az az összeg, piros, majd zöld, majd kék. Az érték lehet egy szám 0-tól 255 Ennek megfelelően, a formátum nem különbözik RGBA, gyűlnek csak egy paramétert - az alfa-csatornát. Az érték lehet 0-1, ahol a 0 - teljes átláthatóság.
Ennek megfelelően kell írni valami ilyesmit állítani egy átlagos áttetszőség:
Nézzük meg a háttér színét egy blokk, ez az, amit kapsz:
Hogyan kell beállítani a háttérben szöveget?
Addig mi tekinthető a háttér munkát blokk szintű elemeket. De mi van, ha be kell állítani a háttérben a szöveget? A megoldás itt egyszerű: a háttérben regisztrálni kell egy vonalat elem, amelyben a szöveget írta. Tehát, először létre kell hoznia a sort. Alapértelmezésben ezek a célok javasoljuk, hogy használja span.
Meg kell azt, hogy csak azért, hogy képes fordulni a css Spanu, hogy most is, és meg fog tenni:
Minden működik. Tény, hogy a háttérben akkor is meg a képet, de nem értem, hogy ez miért van szükség. Talán egyes esetekben ez valahogy alkalmazni.
További lehetőségek létrehozása és kezelése háttér
Így nézett ki az Ön számára, mint a css, hogy a háttérben. De ez még nem minden, hogy kínál nekünk css. Alapvetően minden új lehetőségek jelentek meg köszönet css3. Például egy lineáris és egy radiális gradienst többes hivatkozási háttér, új értékeket az ismétlés, stb Mindezek a jellemzők nagyban egyszerűsíti a munkát a web developer.
Például, hogy a 2-a előtt vagy több háttérképeket, meg kellett létrehozni néhány blokkot és kérjen mindegyiknek megvan a saját háttérrel. Saroklekerekítéssel volt egy valós probléma, úgy, hogy eljött az a pont, hogy megpróbálom, hogy nem használja a kerekítést, mert annak végrehajtása túl bonyolult volt.
Ezért, ha van egy vágy, hogy jobban megértsük a háttérben, azt javasoljuk, hogy adja át a mi természetesen a CSS3. By the way, ahol megtanulhatja, nem csak dolgozni a háttérben, de hozzáteszi, egyik eleme árnyék, használható új választókat, helyezze díszítő keretek, stb CSS3 adott nekünk több vadi új funkciókat.
A legtöbb IT hírek és webfejlesztés A csatorna-távirat
