Hogyan lehet html oldalon hátteret a helyzet, ismétlés, stb

Alig néhány évvel az interneten találtam néhány hasznos oldalak és szolgáltatások, amelyek nem kapcsolódnak közvetlenül a helyszínen építési és általános téma ez a blog, de én csak azt akartam ajánlani nektek:

Cashback szolgáltatásokat. mint például Epn.bz és Letishops. Az első takarít akár 15% Aliekspress és a második etapban Cash Back több mint 1000 online áruházak. Járatkereső, csak kiváló szolgáltatást - Aviasales.ru. Keresés több száz oldalakat, és minden lehetőséget a jegyek, akkor válassza ki a legolcsóbb, vagy azok, ahol kevesebb az utazási idő. Ők is van egy nagy tömeg. alkalmazás és a böngésző plugin.

Bevezetése óta ez a cél, szükségünk van egy css-fájlt, akkor létre kell hozni, és csatlakozni html. Meg van írva a cikkben. Akkor majd indítsa el a munkát. Először is, meg kell dönteni, hogy mit szeretne a hátteret. Ha a teljes lap egészének, hogy meg lehet csinálni a következő:

Body background-color: white;
>

Azaz, megnézzük, hogy a body tag. amely minden honlapunkon. Ahhoz, hogy a háttér színét a background-color tulajdonság. De mi van, ha be kell állítani, mint a háttér képet, nem pedig egy egyszínű? Ezután meg kell írni, így:

Body background-image: url (útvonalát minta risunku.rasshirenie)
>

Az egyértelműség érdekében azt javaslom, hogy fontolja meg az összes részletet a példa. Ehhez fogom használni ezt a képet:

Például background-image: url (comp.png). Ebben a példában, hoztunk létre egy háttérképet a nevét comp (ez az, amit én nevezte) formátumban PNG, amely abban rejlik, ugyanabban a mappában, mint a css-fájlt.
A html létrehoz egy tetszőleges blokk konkrét méreteket, hogy megjelenjen a munkát css-tulajdonságokat.

És stílusok, hogy:

#ct Háttér-kép: url (comp.png);
szélesség: 600px;
magasság: 400px;
>

Ez az, amit megvan:

Miért? Az a tény, hogy az alapértelmezett böngésző ismétli a képet, ahányszor hogy teljesen kitöltse a készüléket. Néha szükség van, és például, ha zavartalan mintákat, de ebben az esetben kell egy képet. Szerencsére, ez is nagyon könnyű kezelni.

ismétlődő háttér

Ha van egy kép, mint a háttér, akkor alapértelmezés szerint ez lesz megismételni vízszintesen és függőlegesen kitölti a teret az oldal. Ahhoz, hogy távolítsa el azt, background-repeat tulajdonság és annak értéke nem ismétlődik (ne ismételjük). Szintén a következő értékeket:

• Repeat-x - megismételni csak vízszintesen
• Repeat-y - csak függőlegesen

Töltse ki a tulajdonságait a grafikai háttér:

Background-position tulajdonság meghatározza a hely, ahol lesz egy kép. Két érték van megadva - mind vízszintesen, mind függőlegesen. Példák: background-position: jobb alsó - a helyzet a jobb alsó, bal felső -, hogy csökkentse a felső (és így az alapértelmezett), 250 képpont 500px - tolva a bal felső sarokban, hogy a megfelelő 250 pixelek és 500 lefelé.

Nézzünk egy példát:

background-position: jobb felső;

Kép mozog a jobb felső szélét. Adtam az egység és a sárga háttér, így láthatja a széleket.

background-position: 50% és 50%;

A kép megjelenik, pontosan a közepén a blokk. Igen, ez is lehetséges, hála az érdeklődés a felvételi helyzetben.

background-position: 70% 20%;

Háttér eltolódott a 70% vízszintesen és 20 függőlegesen.

Engedély szintén pixelben megadni negatív pozíció értékét. Megengedhető, hogy nem, például amikor használja a nagy kép sprite, és meg kell tenni a dobozokat kell lenni ennek a Sprite.

Biztosítása háttér

Nagyon szeretem az egyik jellemzője az úgynevezett háttér-mellékletet. Ő csak két értéket, és az első az alapértelmezett (scroll). Ez azt jelenti, hogy ha lapozunk az oldal háttér is görgethető, és ha használ a kép ismétlés nélküli, a végén befejezi, és aztán megy csak egy egyszínű.

Ennek elkerülése érdekében az előírt háttér-attachment: fixed, és most a mi háttér helyére. Ezt össze lehet hasonlítani az egység, hogy meghatározzák a fix elhelyezése, és nem fog eltűnni az oldalon, ha lapozunk át rajta.

Rövidítése ez az egész

Mi bontott számos olyan tulajdonsága, hogy lehetővé teszik, hogy a háttérben, de ha használja őket, ez egy csúnya rekordot. Van egy nagyon elegáns megoldás. háttér tulajdonság lehetővé teszi, szóközzel elválasztva kell írni a beállításokat az alábbi sorrendben:
Háttér: színes képfrissítési rögzítő helyzet;
És most felírható:

háttér: sárga url (comp.png) no-repeat 20% 100px;

Ha néhány nem kell meghatározni a tulajdonság, hogy egyszerűen elhagyható (a mi esetünkben, mi nem rögzíti a background-attachment).

sok háttérrel

És mi van, ha több kell, háttérképeket? Történik, mit lehet tenni. Ma css támogatja. Nézzük és mi megpróbáljuk. Vegyük ezt az ikont

Hívtam laptop.

És itt van a kódot beilleszteni MultiFon:

background: url (comp.png) no-repeat 20% 100px,
url (laptop.png) no-repeat 50% 50%;
background-color: sárga;

Mint látható, csak annyi, hogy egy vessző után az első képet, és regisztrálja a beállításokat a második. Egyszínű ebben az esetben jobb, hogy kérje külön-külön.

Ugyanígy lehet írt képek számát, de ne vigyük túlzásba - túl sok grafika nem túl jó.

Itt, ezen szeretném befejezni ezt a cikket. A háttérben meg tudod csinálni egy csomó más érdekes dolgot róluk megpróbálom írni a jövőben (valami már írt - például itt). Sikeres felfedezni ezt a tulajdonságot.