Jag tror att det inte finns en enda plats där fastigheten inte används CSS bakgrund. Det verkar som om vad kan vara enklare än den här egenskapen? Men nej, dess möjligheter är mycket bredare än den vanliga tilldelningen av en bild eller färg som sidbakgrund. Vissa saker kommer att vara bekanta, medan andra förmodligen kommer att vara nya för många. I vilket fall som helst kommer det att vara användbart att noggrant veta hur bakgrunden fungerar.
CSS3 tillförde många nya saker till fastigheten, såsom transparens och att tilldela flera bilder som bakgrund, men vi kommer att prata om detta nedan, men först ska vi titta på grunderna för fastigheten bakgrund.
bakgrundsfärg
Jag är mer än säker på att du redan har tilldelat bakgrundsfärgen mer än en gång. Detta kan göras med flera typer av notation: vanlig (färgnamnet används), hexadecimal eller RGB notation. Varje typ är likvärdig, använd den du gillar bäst. Jag försöker använda det kortaste alternativet, och för enklare uppfattning är den resulterande stilfilen lite mindre i storlek.
P (bakgrundsfärg: röd;) p (bakgrundsfärg: #f00;) p (bakgrundsfärg: #ff0000;) p (bakgrundsfärg: rgb(255, 0, 0;))
CSS3 stöder transparens, så vi kan lägga till den i vår färg, till exempel så här:
P (bakgrundsfärg: rgba(255, 0, 0, 0,5);)
Den sista siffran satte transparensen till 50 %. Du kan ställa in transparensvärdet från 0 (helt genomskinlig bakgrund) till 1 (helt ogenomskinlig).
bakgrundsbild
Den här egenskapen används också väldigt ofta, den låter dig tilldela en bild till bakgrunden. CSS3 har lagt till möjligheten att tilldela flera bilder till bakgrunden, var och en skapar sitt eget lager, så varje efterföljande överlappar det föregående. Varför kan detta vara användbart? Allt är ganska enkelt - låt oss säga att du måste skruva små krusiduller i varje hörn av webbplatsen. Med tanke på en mer eller mindre gummiaktig layout är det inte ett alternativ att använda en bild. Därför gör vi 4 "lager", flyttar varje bild till sitt eget hörn och det är allt, problemet är löst
Body (bakgrundsbild: url("bild1"), url("bild2"), url("bild3"))
Om du behöver tilldela en bild till bakgrunden lämnar vi bara den första i koden, jag tror att detta är förståeligt.
När du använder bilder som bakgrund bör du komma ihåg två regler:
- ställ in en kontrasterande bakgrundsfärg om användaren inte ser bilden av någon anledning. Det kan helt enkelt stänga av visningen av bilder, vilket sparar trafik.
- Använd inte en bakgrundsbild för att förmedla viktig information. Av de skäl som anges ovan kanske användaren inte ser den.
Stödet för flera bakgrundsbilder är ganska omfattande. Alla webbläsare, även IE8, stöder den här egenskapen.
Och här kommer vi till det viktigaste, låt oss parafrasera detta: "Sajten börjar med bakgrunden." De flesta bloggare gör "klassiska bloggar" med vit bakgrund, men vi går en annan väg. Gå förbi en underbar fastighet CSS bakgrundsbild, vi kan inte.
Vad gör den? Denna fastighet CSS bakgrundsbild infogar en bild som bakgrund i olika element HTML-sidor. Det är inte begränsat till bara taggen kropp, och används ofta i webbdesign, till exempel för: div, li, p, tabell, sidhuvud, sidfot.
Låt oss titta på ett exempel:
Webbplatsdesign börjar med bakgrunden.
Det skulle vara korrekt att ange en färg för bakgrunden – egenskap bakgrundsfärg, som ett skyddsnät om bilden inte laddas. Inom parantes url() ange sökvägen till mappen med bilder.
Som standard kommer bilden att upprepas som en "bricka" tills den fyller hela webbläsarskärmen när vi flyttar ner på sidan, kommer vår "bricka" att fylla både den andra skärmen och den tredje, exakt tills innehållet på sidan tar slut; . Det är tydligt att ett sådant resultat inte är höjden på designtanken, och vi kommer inte att ha ett "badrum", utan bara en blogg, där läsbarhet är en mycket viktig punkt.
Ett enkelt alternativ för att bli av med "kakladheten" är att använda en stor bild, minst 1024 px bred, så att den fyller hela skärmen. Det skulle också vara en bra lösning att hitta en sömlös textur, när det multipliceras kommer mönstret att se ut som en helhet.
Hur gör man bakgrunden mer attraktiv?
Tack gode gud att vi har hjälpare för detta:
- ingen upprepning– inaktivera upprepning
- upprepa-x– upprepa mönstret endast horisontellt
- upprepa-y– upprepa mönstret endast vertikalt
Till exempel:
Blogghuvud
Detta är en bakgrundsstruktur som bara upprepas horisontellt.
Nästa hjälpare - fastighet bakgrundsposition, låter dig placera bakgrundsbilden var som helst på skärmen. Denna teknik är utbredd i modern webbdesign. Vi har en bild, men den är inte en del av innehållet, utan fungerar endast som dekoration för sajten.
Rubrik
Ett exempel på en icke-repeterande bakgrund med en given positionering.
Bilden visas endast en gång och finns till höger.
Indraget från högerkanten är satt till 200 px för att undvika att texten kolliderar med bakgrunden.
Om vi vill att bilden alltid ska vara synlig när skärmen rullar nedåt måste vi lägga till en egenskap i koden ovan - bakgrundsbilaga: fixerad;
Vad är skillnaden mellan img Och bakgrundsbild?
Skillnaden är grundläggande, tag img förs in direkt i kroppen HTML-sida och ansvarar för innehållet (illustrationer, fotografier, avatarer), bär en semantisk belastning. Det är mycket viktigt att bilden indexeras av sökmotorer och ingår i sökresultaten. Egenskaper CSS bakgrundsbild– gör webbplatsen unik och vacker, det vill säga detta är en design som ska överföras till en extern fil CSS stilar eller använd inuti ett element stil.
Naturligtvis betyder det inte det bakgrundsbild fungerar inte om den placeras i kroppen HTML-sidor. Men jag rekommenderar starkt att allt relaterat till design tas med CSS. Som ett resultat kommer vi att få en ren HTML-koda:
- detta kommer att ha en positiv effekt på webbplatsindexering. Sökrobotar kommer att älska din webbplats och besöka den oftare.
- dina besökare kommer också att vara nöjda, sajten laddas snabbare på grund av sin låga vikt.
- Det är lättare för dig som webbansvarig att arbeta med ren kod.
Tja, vi har övervägt mer eller mindre alla alternativ som använder fastigheten CSS bakgrundsbild. Fler träningsvänner! Kopiera gärna koden och kom på dina egna varianter!
kort information
CSS-versioner
Värderingar
url Värdet är sökvägen till grafikfilen, som anges i url()-konstruktionen. Sökvägen till filen kan skrivas antingen med citattecken (dubbel eller enkel) eller utan dem. none Inaktiverar bakgrundsbilden för elementet. ärver Ärver värdet av föräldern.HTML5 CSS2.1 IE Cr Op Sa Fx
Objektmodell
document.getElementById("elementID ").style.backgroundImage
Webbläsare
Internet Explorer-versioner upp till och inklusive 7.0 tillämpar en bakgrund på insidan av ett element som har egenskapen hasLayout. Om elementet inte har en hasLayout kommer egenskapen background-image att respektera elementets gränser, som specificerats i specifikationen. Skillnaden i visning kommer att märkas om gränserna är streckade eller prickade istället för fasta.
Om elementet är inställt på rullning eller auto , kommer Internet Explorer 8 att ha en vertikal fördröjning på en pixel när bakgrunden rullar.
Internet Explorer-versioner upp till och inklusive 7.0 stöder inte ärvt värde.
Om bakgrunden är inställd för en tabellrad (tagg
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Resultatet av detta exempel i Chrome-webbläsaren visas i fig. 1. Webbläsarna Internet Explorer, Opera och Firefox visar bakgrunden för raden korrekt (Fig. 2).
Ris. 1. Upprepa bakgrunden för varje cell
Ris. 2. Bakgrund för hela raden
Hej kära läsare av bloggsidan. Idag ska vi titta på fem CSS-regler som låter dig ställa in en bakgrund för vilket element som helst i HTML - bakgrundsposition (bild, upprepning, färg, bilaga). Tja, låt oss inte heller glömma att nämna den sammansatta bakgrundsregeln.
Det är inget komplicerat med detta, men det finns vissa subtiliteter och nyanser som du behöver veta om en färdig mall (kom ihåg om, vilket kommer att hjälpa till att avslöja alla ins och outs i varje design).
Låt mig återigen påminna dig om att den här artikeln är en del av en serie och det är bäst att börja studera stilmarkering från början, nämligen med en artikel om vad CSS är och vad den används med, och sedan följa i den ordning som anges i uppslagsboken. Även om det i alla fall är upp till dig, men nu ska vi prata om att ställa in bakgrunden.
Färg, bakgrundsfärg och bakgrundsbild
Låt oss först se hur man ställer in färgen på HTML-element med hjälp av Css färgregler. Faktum är att allt är enkelt här. Syntaxen är helt normal och du kan ställa in färgen i enlighet med hur det gjordes i hypertextmarkeringsspråk. Som du kommer ihåg, placerad efter hash-tecknet (hash - "#fe35a3"), eller med tre siffror, om den första sammanfaller med värdet på den andra, den tredje med den fjärde respektive den femte med den sjätte ( färgkoden "#aa33ff" kan kort skrivas som "a3f").
Färger i HTML- och Css-kod kan också representeras i form av ord (till exempel "röd"), men oftast är det den hexadecimala koden som används:
Färg: #303
Som ett exempel färgade jag detta lilla stycke i samma färg som ovan (#303). Den skiljer sig nu något från färgen på alla andra stycken (mörkare), som är inställd på #555 i CSS-filen för WordPress-temat jag använder. Men att ställa in färgen med färg är ganska enkelt, men med bakgrunden blir det lite mer komplicerat.
Så, för bakgrunden i Css Det finns fem regler som kan kombineras till en om så önskas. För att se dem kan du gå till den aktuella W3C-specifikationssidan och leta efter vad som helst med ordet Bakgrund:
- bakgrundsfärg – med den här regeln ställer du in bakgrundsfärgen för alla HTML-element. Du kan använda antingen en kod eller namnet på nyansen, d.v.s. allt är exakt samma som det var när man använde färg.
bakgrundsbild - med den kan du använda en bild som bakgrund (men var noga med att läsa om det, eftersom tunga bilder kommer att sakta ner laddningen av sidor), vars väg kommer att anges i url ()-funktionen.
Om du tittar på specifikationen ser du det standard bakgrundsfärg alla element kommer att vara transparenta (standardvärdet för regeln är "bakgrundsfärg: genomskinlig"). Sant, i element kommer det inte att vara transparent som standard, eftersom Dessa är systemelement och allt om dem är annorlunda och annorlunda än vanliga hypertextmarkeringsspråktaggar.
Färgen i bakgrundsfärg är inställd som standard (sex eller tre siffror i hexadecimal kod, eller ett ord):
Bakgrundsfärg: #FEFCDE
Till exempel är bakgrunden för detta stycke specificerad med bakgrundsfärg med färgkoden precis ovan.
Alla andra fyra CSS-regler kommer endast att gälla bakgrundsbilden, som kan ställas in för alla HTML-element och, om så önskas, placeras exakt. Vilken grafikfil som ska användas kan specificeras med hjälp av bakgrundsbild.
Om du tittar på specifikationen för uppmärkningsspråket ser du att bakgrundsbilden som standard är "ingen" (dvs. ingen bild används för bakgrunden). Tja, om du fortfarande behöver detta, måste du i url()-funktionen ange sökvägen till den:
Background-image:url(https://site/image/comment_top_focus.gif);
Till det här stycket använde jag till exempel en grafisk fil med bakgrund, vars sökväg beskrivs precis ovan. Du ser att hela området som tilldelats för detta stycke är täckt med en återkommande bild, som i originalet ser ut så här:
De där. när du använder endast en bakgrundsbildregel som anger sökvägen till grafikfilen, kommer samma bild att multipliceras både vertikalt och horisontellt tills den täcker hela området som tilldelats på webbsidan för detta specifika HTML-element (i vårt exempel var det en paragraf). Varför händer det här?
Background-repeat - upprepa bakgrundsbilden
Ja, eftersom vi inte angav något värde för CSS-regeln bakgrund-upprepa, vilket betyder att standardvärdet kommer att användas för det. När vi tittar på specifikationen får vi reda på att detta värde motsvarar "upprepa" (upprepa bilden på alla axlar). Svaret kom naturligt.
Därför kan vi med bakgrundsupprepning hantera bakgrundsbildrepetitioner. Denna regel kan bara ha fyra betydelser:
Bakgrundsposition - bakgrundspositionering
Nu uppstår frågan: är det möjligt att flytta bakgrundsbilden bort från det övre vänstra hörnet av området som begränsar storleken på elementet. Naturligtvis kan du, och det finns en separat regel för detta ändamål. bakgrundsposition:
När man tittar på CSS-specifikationen blir det tydligt varför bakgrundsbilden som standard trycks exakt till den övre vänstra kanten av HTML-elementområdet. Eftersom värdet "0% 0%" är standardvärdet för bakgrundspositionsregeln.
Tja, när denna regel inte uttryckligen är inställd för ett element (som i vårt fall), så väljer webbläsaren dess värde, vilket accepteras i specifikationen som standard (observera att koordinataxlarna i CSS rapporteras exakt från den övre vänstra kanten av arealementet).
Det framgår också av specifikationen att för att placera bakgrundsbilden med hjälp av bakgrundsposition kan du använda både relativa (procent) och absoluta värden (till exempel ). Tja, du kan också använda ord som kommer att motsvara vissa digitala värden. Men först till kvarn.
När du ställer in placeringen av bakgrundsbilden använder absoluta enheter i bakgrundsposition används följande princip för att bestämma dess slutliga position:
De där. webbläsaren kommer att beräkna de angivna förskjutningarna längs X- och Y-axlarna från ursprunget för området där objektet är placerat till ursprunget för själva bilden. Till exempel, i det här stycket placerade jag bakgrundsbilden via bakgrundsposition med hjälp av följande CSS-regler:
Background-image:url(https://site/image/logo.svg?1); background-repeat:no-repeat; bakgrundsposition:400px 25px;
Observera att den i det här fallet kommer att riktas mot mitten av visningsområdet och inte till mitten av området som tilldelats för dessa stycken. Det är tydligt att det i verkligheten är osannolikt att en sådan placering av en bakgrundsbild kommer att användas.
Men om du ställer in en fast bakgrundsposition för element som Body eller Html (dvs i taggar som täcker hela webbsidan), kommer denna bild alltid att vara synlig i visningsporten och detta är just användningen av CSS-bakgrundsbilagan fastighet i modern kvarterslayout.
Finns det några fler prefabricerad regel Bakgrund, vilket gör att du kan kombinera alla fem regler som beskrivs ovan i en flaska. Dessutom kan värdena för alla fem i den kombinerade versionen användas i valfri ordning och i vilken mängd som helst (de är unika och webbläsaren kommer inte att förväxla dem med varandra). Allt du inte uttryckligen anger kommer att antas av webbläsaren vara standardvärdet.
Png) ingen upprepning 50%;
Prefab-exemplet tillämpas på detta stycke för tydlighetens skull. Det blev inte snyggt, men det är inte huvudsaken. Det här stycket använder en konstig gul bakgrundsfyllning och använder också en bild av Liveinternet-logotypen, justerad mot mitten av stycket. Därför att Om regeln för bakgrundsbifogning inte ges något värde, används rullningsvärdet (standard).
Om du för något element bara vill ställa in en färgfyllning och inte bry dig om en bakgrundsbild, kan du göra detta istället:
Bakgrundsfärg: #FEFCDE
skriva:
Bakgrund: #FEFCDE
Eftersom alla andra värden i prefab-regeln kommer att tas som standard, och det är vad du behövde.
Lycka till! Vi ses snart på bloggsidans sidor
Du kanske är intresserad
Liststil (typ, bild, position) - Css-regler för att anpassa utseendet på listor i HTML-kod Hur man konfigurerar den alternerande bakgrundsfärgen för rader med tabeller, listor och andra HTML-element på webbplatsen med hjälp av pseudoklassen nth-child 
Position (absolut, relativ och fix) - sätt att placera HTML-element i CSS (regler vänster, höger, upptill och botten) 
Flyta och rensa i CSS - blocklayoutverktyg 
Positionering med hjälp av Z-index och CSS-markörregel för att ändra muspekaren 
Utfyllnad, marginal och kant - ställ in intern och extern utfyllnad i CSS, såväl som kanter för alla sidor (överst, botten, vänster, höger) 
Visa (blockera, ingen, inline) i CSS - ställ in visningstypen för HTML-element på webbsidan 
Prioriteringar i Css och deras ökning på grund av Viktigt, kombination och gruppering av väljare, användar- och författarestilar 
CSS - vad är det, hur kaskadformatmallar kopplas till HTML-kod med hjälp av Style och Link 
Tagg-, klass-, Id- och universella väljare, samt attributväljare i modern CSS
