Proveďte techniku pomocí CSS
Pokud navrhujete webové stránky, možná vás zajímá, jak se na webové stránce vytvořit pevný obrázek na pozadí nebo vodoznak. Jedná se o běžné designové zacházení, které je už delší dobu populární. Je to šikovný efekt ve vašem webovém designu s triky.
Pokud jste to dříve neudělali, nebo jste to dříve zkusili bez štěstí, může se stát, že se proces zdá být zastrašující, ale ve skutečnosti to není vůbec těžké. S tímto krátkým tutoriálem získáte informace, které potřebujete k zvládnutí techniky během několika minut pomocí CSS.
Začínáme
Obrázky na pozadí nebo vodoznaky (které jsou opravdu jen velmi lehké obrázky na pozadí) mají historii v tištěném designu. Dokumenty již dlouhou dobu obsahují vodoznaky, aby se zabránilo jejich kopírování. Navíc mnoho letáků a brožur používá velké části pozadí jako součást návrhu pro tištěný kus. Web design má dlouhé půjčené styly z tisku a obrázky na pozadí jsou jedním z těchto vypůjčených stylů.
Tyto velké obrázky na pozadí lze snadno vytvořit pomocí následujících tří vlastností stylu CSS :
- obrázek na pozadí
- opakování pozadí
- background-attachment
- velikost pozadí
Pozadí - obrázek
Na definování obrázku, který bude použit jako vodoznaku, použijete obrázek na pozadí. Tento styl jednoduše používá cestu k načtení obrázku, který máte na svém webu, pravděpodobně v adresáři s názvem "obrázky".
obrázek na pozadí: url (/images/page-background.jpg);
Je důležité, aby obraz sám byl světlejší nebo průhlednější než normální obraz. Tím vytvoříte vzhled "vodoznaku", ve kterém se za textem, grafikou a dalšími hlavními prvky webové stránky nachází poloprůhledný obraz. Bez tohoto kroku bude obrázek na pozadí soutěžit s informacemi na stránce a bude obtížné číst.
Obrázek pozadí můžete upravit v jakémkoli editačním programu, jako je například Adobe Photoshop.
Pozadí - opakujte
Vlastnost opakování pozadí přichází dále. Chcete-li, aby byl váš obrázek velkým písmem ve vodoznaku, použijte tuto vlastnost, aby se tento obrázek zobrazoval pouze jednou.
opakování pozadí: neopakovat;
Bez vlastností "žádné opakování" je výchozím faktem, že se obrázek na stránce opakuje znovu a znovu. To je nežádoucí ve většině moderních návrhů webových stránek, takže tento styl by měl být považován za nezbytný ve vašem CSS.
Pozadí - příloha
Připojení na pozadí je vlastnost, kterou mnoho webových návrhářů zapomene. Při použití této funkce zůstává váš obrázek na pozadí fixován na místě při použití vlastnosti "fix". To je to, co změní tento obrázek na vodoznak, který je na stránce fixován.
Výchozí hodnota této vlastnosti je "rolovat". Pokud nezadáte hodnotu přílohy na pozadí, pozadí se bude pohybovat spolu se zbytkem stránky.
příloha na pozadí: opraveno;
Velikost pozadí
Velikost pozadí je novější vlastnost CSS. Umožňuje nastavit velikost pozadí na základě výřezu, který je zobrazen. Je to velmi užitečné pro citlivé webové stránky, které se budou zobrazovat v různých velikostech na různých zařízeních .
velikost pozadí: obálka;
Dvě užitečné hodnoty, které můžete použít pro tuto vlastnost, zahrnují:
- Kryt - Zvětšuje pozadí tak, aby se zobrazovala buď celá šířka, nebo plná výška. To znamená, že některé části obrazu se nemusí zobrazit na obrazovce, ale že bude pokryta celá oblast.
- Obsah - Zvětší obraz tak, aby byla v stylizované oblasti zobrazena jak celá šířka, tak výška. Obraz není odříznut, ale nevýhodou je, že části oblasti nemusí být pokryty obrazem.
Přidání CSS na vaši stránku
Po pochopení výše uvedených vlastností a jejich hodnot můžete tyto styly přidat na své webové stránky.
Pokud vytváříte stránku s jednou stránkou, přidejte následující údaje do hlavičky webové stránky. Přidejte ji do stylů CSS externího stylového listu, pokud vytváříte vícestranovou stránku a chcete využít sílu externího listu.