Htmlbook.ru.

I samband med särdragens särdrag förvärvar bakgrundsritningarna en viktig roll i utformningen av platsen på webbplatsen. Samtidigt deltar de aktivt i en mängd olika saker, till exempel, automatiserar processen med att fästa ritningarna i texten, skapa gradientövergångar och lägga till en bakgrund under innehållet. Följande är några aspekter av tillämpningen av bakgrundsbilder.

Bakgrund på webbsidan

Installera bakgrundsmönstret på webbsidan Traditionellt förekommer genom attributet bakgrund. Märka <Kropp> . En sådan ritning upprepas horisontellt och vertikalt, fyller på så sätt hela webbläsarfönstret. Det är uppenbart att det inte finns några speciella alternativ för kreativitet här, så vi vänder oss till stilarna och ser vad du kan göra med CSS.

CSS har fem attribut som styr bakgrundsbilden: dess tillägg, position och repetition. Men alla dessa parametrar ersätter en universell egendom. bakgrund. , det kommer att användas i framtiden.

Lägger till bakgrundsritning

Lägga till en bild inträffar genom att ställa in adressen till bilden via sökordet Url . För att hantera upprepningen av bilden gäller argument NO-REPEAT. (ingen repetition), Upprepa-x. (horisontell repetition) och Upprepa-y. (Upprepning av vertikal). Tack vare detta kan du få en webbsida som visas i fig. ett.

Fikon. 1. Bakgrundsbild utan repetition

Fikon. 1. Bakgrundsbild utan repetition

För att ställa in bilden på webbsidan, bör du lägga till en stilfastighet. bakgrund. Till väljare Kropp. Som visas i exempel 1.

Exempel 1. Bakgrundsritning

<! DOCTYPE HTML Public "- // w3c // dtd html 4.01 // en" http://www.w3.org/tr/html4/strict.dtd "> <html> <head> <meta http-quive = "Innehållstyp" innehåll = "Text / HTML; charset = UTF-8"> <titel> bakgrundsbild </ title> <style type = "Text / css"> kropp {bakgrund: URL (Bilder / Target.gif ) No-repeat 30px 20px; / * Bakgrundsinställningar * /} </ Style> </ Head> <Body> <p> ... </ p> </ body> </ html> 

I det här exemplet definieras grafisk ritning mål.gif som en bakgrund av en webbsida utan upprepning av bilden. Till bilden passade inte tätt mot webbläsarens kanter, det skiftar på 30 pixlar till höger och 20 pixlar ner från deras ursprungliga läge.

Repetition av ritning

På grund av det faktum att du kan definiera upprepningen av bakgrundsmönstret horisontellt eller vertikalt finns flera alternativ för att designa webbsidor tillgängliga. Till exempel, för att skapa en vertikal remsa längs den vänstra kanten (fig 2) behöver du en bild som visas i fig. 3.

Fikon. 2. Repetition av ritningen vertikalt

Fikon. 2. Repetition av ritningen vertikalt

Fikon. 3. Bild för att skapa bakgrund

Fikon. 3. Bild för att skapa bakgrund

Ritningen bör vara sådan att genom vertikal det dockat med varandra utan märkbara sömmar, och utgjorde också en enda hel med en specificerad färg på webbsidan. I exempel 2 ges skapandet av ett sådant bakgrundsmönster, igen med hjälp av egenskapen. bakgrund. och dess betydelser Upprepa-y. .

Exempel 2. Repetition av bakgrunden vertikalt

<! DOCTYPE HTML Public "- // w3c // dtd html 4.01 // en" http://www.w3.org/tr/html4/strict.dtd "> <html> <head> <meta http-quive = "Innehållstyp" -innehåll = "Text / HTML; Charset = UTF-8"> <Titel> Bakgrundsbild </ Titel> <Style Type = "Text / CSS"> Kroppen {Bakgrund: # FC0-URL (Bilder / Hand .png) upprepa-y; / * Vertikal repetition * /} </ style> </ head> <body> <p> ... </ p> </ body> </ html> 

På samma sätt är det möjligt att upprepa bakgrunden horisontellt, till exempel genom att skapa en gradient och installera den som en bakgrundsbild (fig 4).

Om fönsterbredden är mindre än bildens bredd, kommer mediefråga att användas för att anpassa bakgrunden i mitten.

Fikon. 4. Använda en gradient som bakgrund

För att få en webbsida som visas i fig. 4, det är nödvändigt att först göra en bild med en gradientövergång. Bredden är tillräcklig för att indikera 20-40 pixlar, och rithöjden beror på syftet med dokumentet och den påstådda höjden på webbsidans innehåll. Du bör inte heller glömma att den stora storleken ritningen ökar omfattningen av den grafiska filen. Och detta kommer att påverka startens hastighet och i slutändan kommer att sakta ner bakgrundsdisplayen. För det här fallet var en bild av 30x200 pixlar helt närmade sig (fig 5).

Fikon. 5. Gradient bild för att skapa bakgrund

Fikon. 5. Gradient bild för att skapa bakgrund

Exempel 3 visar HTML-koden för att skapa en gradientbakgrund.

Exempel 3. Upprepa bakgrund horisontellt

<! DOCTYPE HTML Public "- // w3c // dtd html 4.01 // en" http://www.w3.org/tr/html4/strict.dtd "> <html> <head> <meta http-quive = "Innehållstyp" -innehåll = "Text / HTML; charset = UTF-8"> <Titel> Bakgrundsbild </ Titel> <Style Type = "Text / CSS"> Kropp {Bakgrund: URL (Bilder / Gradient2.png ) Repetera-x; / * Bakgrundsparametrar * / Text-Justering: Centrum; / * Justeringsblock i mitten * /} Div {Margin: Auto; / * Indrag runt blocket * / Bredd: 75%; / * Blockbredd * / Höjd: 90%; / * Block Höjd * / Text-Justera: Vänster; / * Textjustering till vänster kant * / Padding: 10px; / * Fält runt texten * / Bakgrund: Vit; / * Bakgrundsfärg * /} </ Style> </ Head> <Body> <div> Lorem Ipsum ... </ Div> </ Body> </ HTML> 

Gradientmönstret är väl kombinerat med ett färgblock, så i det här exemplet tillsätts ett skikt i vilket innehållet på webbsidan visas.

Lägg till teckning till text

Med bakgrundsbilden kan du automatisera processen att lägga till ritningar till en viss text, till exempel till rubriker. Detta använder en universell egendom. bakgrund. som gäller för den önskade väljaren. Som ett värde ange vägen till ritningen och så att den inte upprepar, argumentet NO-REPEAT. (Exempel 4).

Exempel 4. Lägga till en bild

<! DOCTYPE HTML Public "- // w3c // dtd html 4.01 // en" http://www.w3.org/tr/html4/strict.dtd "> <html> <head> <meta http-quive = "Innehållstyp" -innehåll = "Text / HTML; charset = UTF-8"> <titel> Bakgrundsbild </ Titel> <Style Type = "Text / CSS"> H2 {Bakgrund: URL (Bilder / Bok.gif ) NO-REPEAT 0 50%; / * Bakgrundsparametrar * / Padding-Left: 20px; / * Reträtt till vänster om texten * /} </ style> </ head> <body> <h2> rubrik </ h2> <p> Grundläggande text </ p> </ body> </ html> 

Såsom visas i det här exemplet kan ritningen skiftas horisontellt och vertikalt i förhållande till sin ursprungliga position, som standard, det här är den vänstra övre vinkeln på blockelementet. På bakgrundsskiftet kan du ställa in bilden i förhållande till den önskade texten. Så att texten inte överlagras till ritningen, var noga med att lägga till egendom Padding-vänster. På grund av det skiftar texten till höger till det angivna avståndet. Det är i varje fall individuellt och vanligtvis lika med bredden av figuren plus önskad retrop mellan bilden och texten.

Hälsningar. I den här artikeln vill jag berätta om tre sätt att placera en bild som en bakgrund av hela sidan med endast HTML + CSS (utan att använda JS).

Så kraven på bakgrundsbilden är vi som följer:

  • 100% Bredd och sidor Höjd täckt
  • Bakgrundsskalorna om det behövs (bakgrund sträcker sig eller komprimeras beroende på skärmens storlek)
  • Klistra in proportionerna av bilderna (bildförhållande)
  • Bildcentrerad på sidan
  • Bakgrunden orsakar inte scrolls
  • Lösningen är maximalt crossbrawser
  • Ingen annan teknik används utom CSS

<img src = "/ images / background.jpg" class = "bakgrund" />

Metod 1

Enligt min åsikt är detta det bästa sättet, eftersom det är det enklaste, korta och moderna. Den använder CSS3-egendomen Bakgrundsstorlek. som vi ansöker om taggen Html . Exakt Html , men inte Kropp. därför att Dess höjd är större än eller lika med höjden på webbläsarfönstret.

Installera en fast och centrerad bakgrund och justera sedan sin storlek med Bakgrundsstorlek: Skydd .

Html { 

Bakgrund-Bild: URL (Bilder / Bakgrund.jpg);

BAKGRUND-REPEAT: NO-REPEAT;

Bakgrundsposition: Center Center;

Bakgrundsfäste: Fast;

-WebKit-Bakgrundsstorlek: Skydd;

-Moz-bakgrundsstorlek: lock;

-O-bakgrundsstorlek: lock;

  Bakgrundsstorlek: Skydd; 
} 

Demo

Denna metod fungerar i

  • Chrome (vilken version som helst)
  • Opera 10+.

Firefox 3.6+

Safari 3+.

Dvs 9+

För att bilder ska ladda snabbt, lägg bara dina webbplatser från beprövade värdleverantörer, till exempel, beGET.com 
Användare och sökmotorer älskar snabba webbplatser. 

Bakgrund-Bild: URL (Bilder / Bakgrund.jpg);

Metod 2

Denna metod tillhandahåller användningen av IMG-elementet, vars storlek varierar beroende på storleken på webbläsarfönstret. För att sträcka bilden till helskärmen måste den ställa in minhöjd och bredd med ett värde av 100%. Och så att bilden inte komprimeras till den mindre storleken än originalet, installera minbredd med värdet av lika breda bredden på bilden.

Добавить комментарий