Mange nyt layout, bare komme til hjertet for at skabe steder, ofte spekulerer på, hvordan til html at gøre baggrundsbilledet.Og hvis nogle af dem kan løse dette problem, du stadig har problemer under strækningen hele bredden af billedet på skærmen.Samtidig vil jeg gerne se stedet vises på alle browsere, så det skal være i overensstemmelse med kravene krossbrauzernosti.Du kan indstille en baggrund på to måder: ved at bruge HTML-tags og CSS.Hver for sig selv vælger den bedste løsning.Selvfølgelig CSS stil er meget mere praktisk, fordi koden er gemt i en separat fil, og ikke optager ekstra højttalere i de vigtigste site tags, men først overveje en enkel metode til at indstille baggrundsbilledet på sitet.
grundlæggende HTML-tags til at skabe baggrunden
Så gå på spørgsmålet om, hvordan man laver et baggrundsbillede til html på skærmen.For at se smuk websted, er du nødt til at forstå en temmelig vigtig detalje: det er nok bare at lave en gradient baggrund eller en fast farve til at male det, men hvis du ønsker at indsætte billedet i baggrunden, vil det ikke strække den fulde bredde af skærmen.Billedet var oprindeligt nødvendigt at samle op eller lav dit eget design med denne udvidelse, hvor du vil vise siden.Først når baggrundsbilledet er klar, flytte den til en mappe kaldet "Billeder».I det, vil vi gemme alle de anvendte billeder, animationer og andre billedfiler.Denne mappe skal være i roden af filen med alle dine html.Nu kan du gå videre til koden.Der er flere muligheder for optagelse kode, hvorefter mønsteret skifter billedet.
- Skriv attribut tag.
- via CSS stil i HTML-koden.
- Skriv CSS stil i en separat fil.
Sådan HTML at gøre baggrundsbillede, for dig at beslutte, men jeg vil gerne sige et par ord om, hvordan det ville være det mest optimale.Den første metode er ved at skrive gennem en tag har længe været forældet.Den anden mulighed benyttes meget sjældent, fordi det viser sig, at en masse af den samme kode.En tredje mulighed er den mest almindelige og effektive.Her er de HTML-tag eksempler:
- første metode med at optage gennem et tag (kroppen) i filen index.htm.Det er skrevet i denne form: (krop baggrund = "Nazvanie_papki / Nazvanie_kartinki.rasshirenie") (/ kroppen).Det vil sige, hvis vi har et billede med navnet «Picture» og udvidelse JPG, og mappen vi hedder «billeder», så registrering af HTML-koden ville se sådan ud: (krop baggrund = "Billeder / Picture.jpg") ... (/ kroppen).
- anden metode indebærer optagelse CSS styling, men er skrevet i samme fil med navnet index.htm.(krop style = "baggrund: url ('../ billeder / Picture.jpg)").
- Og den tredje metode til optagelse er lavet i to filer.Dokumentet med navnet index.htm tag (hoved) er skrevet sådan linje: (hoved) (link rel = "stylesheet" type = "text / css" href = "Put_k CSS_faylu") (/ hoved).En stil fil med navnet style.css allerede skriver: body {baggrund: url (Billeder / Picture.jpg ')}.
Sådan HTML at gøre baggrundsbilledet, vi diskuterede.Nu er du nødt til at regne ud, hvordan at strække billedet tværs af bredden af hele skærmen.
metoder til at strække tapet på bredden af vinduet
forestille sig vores skærm i procent form.Det viser sig, at hele længden og bredden af skærmen vil være 100% x 100%.Vi er nødt til at strække billedet til denne bredde.Tilføj til at optage billeder i style.css fil linje, der vil strække billedet til hele bredden og længden af skærmen.Som der er skrevet i din CSS stil?Det er simpelt!
krop
{
baggrund: url (billeder / Picture.jpg «)
baggrund-size: 100%;/ * Dette indlæg er velegnet til de fleste moderne browsere * /
}
Så vi regnet ud, hvordan at gøre billedet baggrunden til html på skærmen.Der er en metode til at optage i filen index.htm.Selv om denne metode og forældet, men for begyndere er det nødvendigt at kende og forstå.Koden (hoved) (stil) div {background-size: dække;} (/ Style) (/ hoved), denne rekord betyder, at vi afsætter en særlig enhed til baggrunden, som vil være anbragt over hele bredden af vinduet.Vi har overvejet to måder at gøre sitet baggrundsbillede html, er billedet strækkes til den fulde bredde af skærmen i nogen af de moderne browsere.
Hvordan man laver en fast baggrund
Hvis du beslutter at bruge billedet som baggrund fremtid web-ressource, så er du bare nødt til at vide, hvordan at gøre det fast, så det ikke strække i længden og ikke ødelægge det æstetiske udseende.Blot ved hjælp af HTML-kode til at registrere en lille tilføjelse.Du er nødt til style.css fil for at tilføje en sætning efter baggrunden: url (billeder / Picture.jpg) fast;eller i stedet tilføjes efter semikolon separat linje - position: fast.Således vil din tapet fastsættes.Under rulle et indhold websted, vil du se, at tekstlinjer bevæger, men baggrunden forbliver på plads.Så du har lært hvordan til html at gøre baggrundsbilledet, på flere måder.
arbejde med tabeller i HTML
Mange uerfarne web-udviklere, konfronteret med borde og enheder ofte forstår ikke, hvordan til html at gøre tabellen baggrundsbillede.Ligesom alle hold HTML og CSS, sprog web programmering er ganske enkel.Og løsningen på dette problem er at skrive et par linjer kode.Du skal allerede ved, at skrive en tabel af rækker og kolonner, henholdsvis, som angivet ved mærkerne (TR) og (TD).For at gøre på baggrund af tabellen i form af billeder, er det nødvendigt at tilføje til tag (tabel), (TR) eller (td) en enkel sætning med henvisning til billedet: baggrund = URL af billedet.For klarhedens skyld, giver vi et par eksempler.
borde med billede baggrund i stedet: HTML eksempler
Tegn en 2x3 bord og gør det baggrundsbilledet er gemt i mappen "Billeder": (tabel baggrund = "Images / Picture.jpg") (tr) (td)1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (TR) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabel).Så vores tabel vil blive trukket i baggrunden af billedet.
nu tegne den samme plade størrelser 2x3, men indsætte et billede i en kolonne nummer 1, 4, 5 og 6. (tabel) (tr) (td baggrund = "Billeder / Picture.jpg") 1 (/ td)(td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td baggrund = "billeder / Picture.jpg") 4 (/ td) (td background = "billeder / Picture.jpg") 5 (/ td) (td baggrund =" Billeder / Picture.jpg ") 6 (/ td) (/ TR) (/ tabel).Efter at have set kan se, at baggrunden vises kun i de celler, hvor vi har registreret, men ikke hele tabellen.
Cross-browser hjemmeside
Der er sådan en ting som cross-browser kompatibilitet web-ressource.Det betyder, at siderne på webstedet vil blive lige så godt vises i forskellige typer og versioner af browsere.Det bør være HTML-koden og CSS til at tilpasse den stil kræves af browsere.Desuden i den moderne æra af smartphones, mange webudviklere forsøger at oprette websteder, der er tilpasset og en mobil version af en computer og udseende.
