For at ændre baggrundsfarven på en hel webside eller individuelle elementer Den generiske baggrunds- eller baggrundsfarveegenskab anvendes. Farve kan angives i ethvert format, der er tilgængeligt for CSS. De mest almindelige metoder er følgende.

Efter farvenavn

Browsere understøtter nogle farver efter deres navn. Her er nogle søgeord- sort (sort), hvid (hvid), rød (rød), grøn (grøn), blå (blå) osv.

Efter hexadecimal værdi

Tal bruges til at sætte farver hexadecimal kode. Det hexadecimale system, i modsætning til decimalsystemet, er, som navnet antyder, baseret på tallet 16. Tallene vil være som følger: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Nummer 10 til 15 erstattes med latinske bogstaver. Tal større end 15 tommer hexadecimalt system dannes ved at kombinere to tal til ét. For eksempel tallet 255 tommer decimalsystem svarer til tallet FF i hexadecimal. For at undgå forvirring ved bestemmelse af talsystemet, før hexadecimalt tal sæt hash-symbolet #, for eksempel #666999. Hver af tre farver- rød, grøn og blå - kan tage værdier fra 00 til FF. Farvesymbolet er således opdelt i tre komponenter #rrggbb, hvor de to første symboler angiver farvens røde komponent, de to midterste - grøn, og de to sidste - blå. Det er tilladt at bruge en forkortet form som #rgb, hvor hvert tegn skal fordobles. Derfor skal posten #fc0 behandles som #ffcc00. Tilmeld dig i dette tilfælde betyder ikke noget, så teksten kan skrives med både store og små bogstaver.

Bruger RGB

Du kan bestemme farve ved hjælp af de røde, grønne og blå værdier i decimal. Hver af de tre komponenter kan tage et tal fra 0 til 255. Det er også muligt at indstille farven som en procentdel, for eksempel rgb(90%, 30%, 60%).

RGBA

RGBA-format Ligner i syntaks til RGB, men inkluderer en alfakanal, der bestemmer elementets gennemsigtighed. En værdi på 0 er helt gennemsigtig, 1 er uigennemsigtig og mellemværdi gerne 0,5 - gennemskinnelighed.

Eksempel 1 viser ændring af baggrunds- og tekstfarver.

Eksempel 1: Baggrundsfarve

Bæredygtighed

Lyapunov-stabilitet inverterer oscillerende en stabil enhed.

Resultatet af dette eksempel er vist i fig. 1.

Ris. 1. Farvet baggrund

RGBA-formatet giver dig mulighed for at indstille baggrundsfarven for et element til at være semi-transparent, så baggrunden på websiden vises gennem det. Det ser mere iøjnefaldende og imponerende ud, når vi har et baggrundsbillede eller et mønster i stedet for en ensfarvet. Så vil tegningen fremstå gennem baggrunden, men tekstens læsbarhed forbliver (fig. 2).

Ris. 2. Gennemsigtig baggrund

Eksempel 2 viser, hvordan man bruger RGBA-formatet til at skabe en sådan baggrund.

Eksempel 2: RGBA-format

Fra forfatteren: Velkommen til webformyself, og i dag vil jeg fortælle dig, hvordan du ændrer baggrunden for webstedet. Baggrundsfarve eller billedet i baggrunden kan spille en stor rolle for, hvordan et websted opfattes, så du skal vide, hvordan du installerer det.

Hvordan man ændrer baggrund i wordpress

Igen, hvis du wordpress motor, så vil det ikke være svært at ændre sidens generelle baggrund. Du skal bare klikke på knappen "Tilpas" på fanen "Udseende". Her skal du vælge "Farver". Afhængigt af den skabelon du vælger, kan du muligvis vælge farver til forskellige elementer. Men du kan vælge farven på siden under alle omstændigheder - et praktisk farvepanel åbnes foran dig.

Antallet af indstillinger her afhænger af, hvilken skabelon du har. Under alle omstændigheder burde det bestemt være muligt at indstille farven for hele siden, i forskellige skabeloner Du kan også indstille baggrunden og farven for titler, links osv.

Faktisk er det alt, du behøver at vide. Hvis du skal downloade baggrundsbillede– vælg det relevante element og find det på din computer påkrævet fil.

På en god måde bør billedet ikke være for tungt, for det vil i høj grad påvirke sidens indlæsningshastighed. Det er ideelt at bruge såkaldte sømløse baggrundsbilleder, som gentages vandret og lodret og dermed fylder hele rummet.

Efter indlæsning af billedet vil du se et par nyttige parametre til opsætning. Bekvemmelighed ved WordPress er, at du ser ændringer med det samme, alt efter hvilke indstillinger du vælger.

Først bliver du bedt om at vælge en gentagelsesmetode. Der er allerede 4 muligheder: gentag kun vandret, kun lodret, på begge sider og gentag ikke. Afhængigt af det billede, du bruger, skal du træffe et valg.

Gentagelse giver dig mulighed for betydeligt at spare på størrelsen af ​​billedet, når det ikke er det store størrelser og kan gentages, så der ikke er skarpe overgange mellem gentagelserne. På denne måde kan du spare snesevis af kilobytes sammenlignet med metoden, hvor et billede i fuld størrelse af store størrelser indlæses.

Position. Der er ikke noget at forklare, bare se hvordan det ændrer sig udseende sider med forskellige baggrundspositioner. Vælg den mulighed, du bedst kan lide.

Indbinding. Dette er en meget interessant indstilling, den giver dig mulighed for at vælge, om du vil rulle baggrundsbilledet sammen med indholdet eller fryse det ét sted. Personligt kan jeg altid godt lide at vælge den faste mulighed, fordi når du scroller ned, er det kun indholdsblokkene, der flytter sig.

For eksempel, hvis du har en baggrundsbilledehøjde på 1000 pixels, og du ikke gentager eller fanger det, så forsvinder det, når du scroller ned, simpelthen ud af visningen. Ved at fikse baggrunden kan billedet hele tiden forblive synligt. Nogle gange er dette en meget effektiv løsning.

Aktuelle tendenser og tilgange inden for webudvikling

Lær algoritmen til hurtig vækst fra bunden i webstedsopbygning

Faktisk er det alt for at ændre baggrunden i WordPress. Som du kan se, er alt så enkelt som muligt.

Hvordan man ændrer baggrunden for en hjemmeside i html

Okay, vi har kigget på en rent visuel version, hvor du ikke behøver at gå ind i koden og skrive noget der. Lad os nu finde ud af, hvordan man ændrer baggrunden gennem html og css. Hvilke fordele giver dette? Du kan indstille baggrundsbilleder ikke kun for webstedet generelt, men også for hvert element separat. For eksempel for nogle widgets, menuer, overskrifter osv. Dette giver meget flere muligheder inden for hjemmesidedesign og ændring af design.

For at få adgang til al denne styling skal du finde hovedstilarket for din skabelon. Normalt er det placeret i roden, eller i css-mappen, og kaldes style.css eller main.css.

I den vil du se den kode, der skaber forskellige elementer dit websted. Hvis du vil indstille baggrunden globalt, kan du gøre dette ved at tildele en baggrund til kropsvælgeren, det vil sige brødteksten på siden.

Hvordan er baggrunden indstillet?

Husk - baggrundsegenskaben. I dag er det bedre at bruge den forkortede version af at skrive denne ejendom. For eksempel:

body(baggrund: #ccc url(bg.png) ingen gentagelse 50% 50% fast;)

legeme( baggrund: #ccc url(bg.png) ingen gentagelse 50% 50% fast;

Hvad betyder det hele? Den første parameter er normalt indstillet ensfarvet. Lad os sige, at vi indstiller den til grå. Farven er muligvis ikke angivet, hvis der er angivet et baggrundsbillede. Som du kan se, er billedet specificeret ved hjælp af url (filsti) konstruktionen. Derfor skal du skrive stien til filen korrekt ned og også sørge for at angive dens udvidelse.

Alle de parametre, som jeg skrev ned efter dette, er valgfrie og kan specificeres efter ønske. Så jeg specificerede, at baggrundsbilledet ikke skulle gentages, placeres i midten både vandret og lodret og også fikseres ét sted for ikke at forsvinde, når man ruller.

Som du kan se, er her alle de samme parametre, som du konfigurerede visuelt, men her er de registreret som værdier for baggrundsegenskaben.

I i dette eksempel Jeg brugte en forkortet egenskabsnotation, det er bare mere praktisk, men faktisk har hver enkelt parameter sin egen egenskab: baggrundsfarve for farve, baggrundsbillede for et billede, baggrundsposition til indstilling af en position.

For at blive flydende i disse egenskaber råder jeg dig naturligvis til først at tage vores kursus, og ønsker du at blive en avanceret bruger ift. css sprog, Det . Der vil du lære, hvordan du indstiller flere baggrunde på samme tid, opsætter deres gentagelse, bruger gradienter osv. Oplysningerne er meget interessante og nyttige for webstedsbyggere.

Nå, jeg fortalte dig om det grundlæggende i at arbejde med baggrunden. Abonner på vores portal for at modtage nyheder og lære mere om hjemmesidebygning.

Moderne trends og tilgange inden for webudvikling

Lær algoritmen til hurtig vækst fra bunden i webstedsopbygning

God dag til alle, der gerne vil lære og lære noget nyt! Har du nogensinde været opmærksom på udseendet, under udviklingen af ​​hvilket skaberne var for dovne til at designe baggrunden på siderne? Og det gjorde jeg. Det ser dårligt ud. Ofte på grund af manglen på de sædvanlige opdelinger mellem os forskellige typer informationen bliver blandet sammen, og der er simpelthen ikke noget ønske om at fortsætte med at se på noget på sådan en webressource.

For at forhindre en sådan katastrofe i at ske for mig, besluttede jeg at skrive en artikel om emnet: "Sådan laver man en sidebaggrund i html." Efter at have læst publikationen, vil du lære, hvilke værktøjer du kan bruge til at indstille baggrundsdesignet, hvordan du laver baggrunden fast eller ændrer sig og meget mere, der hjælper med at gøre dit websted attraktivt. Lad os nu begynde!

Grundlæggende værktøjer til indstilling af baggrunden for websider

For at indstille et baggrundsbillede leverede websprogsudviklere baggrundsattributten. Den er tilgængelig både i , og i css.

I opmærkningssprog er dette en egenskab for body-tagget, og i style sheets er det en universel egenskab, der giver dig mulighed for at indstille op til 5 baggrundskarakteristika på samme tid. Baggrund er et ret fleksibelt element, der kan bruges til at sætte baggrunden i form af en enkelt farve, et farvebillede eller endda en animation.

Så for at indstille baggrundsbilledet via html enhed bare skriv følgende kode: ...

og i stedet for ordene "filadresse" indsæt stien til billedet.

Bemærk dog venligst! Hvis du ønsker at se et enkeltfarvet lærred som baggrund, angivet med en værdi fra farvepaletten, så gøres dette ved at bruge bgcolor-attributten.

f.eks. ...

, har vi sat en sort baggrund for vores side.

Farver i css og html er angivet enten med et engelsk ord (for eksempel rød) eller speciel kode, som består af #-tegnet og seks tegn efter det (f.eks. #FFDAB9).

Når du skriver den anden mulighed i specialiseret software produkter For udviklere vises paletten automatisk foran dig. Hvis du lige er begyndt at lære disse websprog, så kan du slå farvekoden op på internettet.

Baggrund som egenskab i cascading style sheets

Det er angivet enten i separat fil med css-stile eller i et element