Share
Vi har byggt en komplett guide för att hjälpa dig att lära dig CSS, oavsett om du bara har börjat med grunderna eller vill utforska mer avancerad CSS.
I denna handledning ska vi undersöka en av de äldre, mer välbekanta CSS-egenskaperna: bakgrund. bakgrund är en av flera CSS-egenskaper vars egenskaper ofta förbises. Det såg faktiskt upp en uppgradering med CSS3, som fick nya möjligheter bortom att bara lägga till en bakgrundsbild eller färg. Låt oss titta på några av dem!
Att placera en bakgrunds grafik är okomplicerad och något du är troligt bekant med redan. Om vi vill placera bakgrunden längst ner till höger om elementet tillämpar vi nere till höger till bakgrund-positionen. Till exempel:
#workspace width: 100%; max bredd: 668px; höjd: 400px; bakgrundsfärg: # 525d62; bakgrundsbild: url (bilder / macbook.png); background-repeat: no-repeat; Bakgrundsposition: högerbotten;
Eller med stenografi, bakgrund, efter url definitionen:
#workspace width: 100%; max bredd: 668px; höjd: 400px; bakgrund: # 525d62 url (bilder / macbook.png) no-repeat right bottom;
Sedan tillkomsten av CSS3 har vi kunnat ange positionen offset; De exakta avstånden till de inställda positionerna. Med vårt exempel på nere till höger, vi inkluderar botten 20px höger 30px att positionera vår bakgrund på 20px från botten och 30px från vänster.
#workspace width: 100%; max bredd: 668px; höjd: 400px; bakgrundsfärg: # 525d62; bakgrundsbild: url (bilder / macbook.png); background-repeat: no-repeat; Bakgrundsposition: Höger 30px Botten 20px;
Positionerna (botten, topp, höger, vänster) kan definieras i vilken ordning som helst, men förskjutlängden måste definieras efter varje bakgrundsställning.
Kredit går till Metin Kazan för illustrationerna.
De bakgrund egendom tillåter oss också att lägga till flera bakgrundsbilder. Låt oss därför utöka vårt tidigare exempel med fler saker och prylar.
Vi lägger till dessa bilder i en enda bakgrund eller bakgrundsbild deklaration genom att skilja varje med ett komma. Vi använder bakgrund-positionen egenskap, som också accepterar flera värden, för att styra varje av dessa bakgrundsbilder.
#workspace height: 400px; bakgrundsfärg: # 525d62; bakgrundsbild: url (bilder / macbook.png), url (bilder / mus.png), url (bilder / hdd.png), url (bilder / phone.png), url (bilder / ipad.png), url (bilder / coffee.png), url (images / camera.png); background-repeat: no-repeat; bakgrundsposition: 50% 50%, / * macbook.png * / 75% 295px, / * mouse.png * / 75% 230px, / * hdd.png * / 96% 240px, / * phone.png * / 20 % 250px, / * ipad.png * / 22% 190px, / * coffee.png * / 7% 280px; / * camera.png * /
Vi kan använda fasta enheter (som pixlar), flexibla enheter (som procentandelar) eller en kombination av de två.
Varje par värden representerar koordinater från övre vänstra av behållarelementet, till övre vänstra av bilden. Till exempel är den övre vänstra delen av kamerabilden 280px från toppen av behållaren, då är 7% av tillgängliga bredd över från vänster.
Notera: The tillgängliga Bredden är den totala bredden av behållarelementet, minus bredden på bakgrundsbilden. Därför visas en bakgrundsbild placerad 50% längs x-axeln exakt centrerad!
Dessutom, sedan bakgrund-positionen är en animerbar egendom, vi kan skapa en mer livlig, övertygande bakgrund:
#workspace width: 600px; höjd: 400px; bakgrundsfärg: # 525d62; background-repeat: no-repeat; bakgrundsbild: url (bilder / macbook.png), url (bilder / mus.png), url (bilder / hdd.png), url (bilder / phone.png), url (bilder / ipad.png), url (bilder / coffee.png), url (images / camera.png); bakgrundsställning: 50% 50%, 430px 295px, 425px 230px, 480px 240px, 105px 250px, 120px 190px, 40px 280px; animering: 3s lätthet 0s inView framåt; @keyframes inView 0% bakgrundsposition-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px; bakgrundsställning-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 20% bakgrundsposition-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px; bakgrundsställning-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 30% bakgrundsposition-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px; bakgrundsställning-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 40% bakgrundsposition-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px; bakgrundsställning-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%; 50% bakgrundsposition-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; bakgrundsställning-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%; 60% bakgrundsposition-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; bakgrundsställning-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%; 100% bakgrundsposition-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
Här har vi satt upp ett antal keyframes längs en tidslinje. Vid varje keyframe har vi ändrat bakgrund-ställning-x och bakgrund-ställning-y av varje bakgrundsbild. Animeringen är visserligen rudimentär, så snäll gaffel CodePen och förbättra den!
Notera: Klick Repris längst ned till höger om pennan för att se animationen
Bakgrunden vi använde beställs i följd; den allra första listan visas överst i stapeln, medan den sistnämnda kommer att visas längst ner i bakgrundsbunten.
#workspace width: 600px; höjd: 400px; bakgrundsfärg: # 525d62; bakgrundsbild: url (bilder / macbook.png), url (bilder / mus.png), url (bilder / hdd.png), url (bilder / phone.png), url (bilder / ipad.png), url (bilder / coffee.png), url (images / camera.png); / * staplade längst ner * / bakgrundsrepetition: nej-repetera;
Alla bakgrundsunderegenskaper (bakgrund-repeat, background-storlek, bakgrund-positionen etc.) kan definieras flera gånger, förutom bakgrundsfärg. Om vi tillämpar flera bakgrunder med hjälp av stenografi bakgrund egenskap, definiera bakgrundsfärgen som det senaste värdet för att träda i kraft. Till exempel:
#workspace height: 400px; bakgrund: url (bilder / macbook.png) 50% 50% ingen upprepa, url (bilder / mus.png) 430px 295px no-repeat, url (images / camera.png) 425px 230px no-repeat # 525d62;
Alternativt, lägg till en separat bakgrundsfärg, efter den korta egendomen:
#workspace width: 600px; höjd: 400px; bakgrund: url (bilder / macbook.png) 50% 50% ingen upprepa, url (bilder / mus.png) 430px 295px no-repeat, url (images / camera.png) 425px 230px no-repeat; bakgrundsfärg: # 525d62;
Båda dessa koder gör detsamma, men jag tycker att den senare är mer intuitiv och läsbar.
De bakgrund-blandning-mode gör detsamma som i grafikapplikationer som Photoshop eller Gimp; det blandar bakgrundsbilder till varandra, liksom vad som helst under.
De bakgrund-blandning-mode tar kända värden som täcka över och multiplicera bland några andra som Jonathan Cutrell gör ett fantastiskt jobb att förklara i sin handledning om ämnet. Jag rekommenderar dig att läsa igenom det så att vi kan hoppa in i några praktiska exempel.
Det finns flera sätt att använda CSS-blandningsläge för att skapa slående design, till exempel att blanda en lutning med en bild, som Ian Yates påpekar i sin inspiration:
För att skapa denna effekt lägger vi till en bakgrundsbild och en gradient och tillämpar täcka över blandningsläge.
Accentsconagua
#blend background-repeat: no-repeat; bakgrundsbild: url ('img / people-15.jpg'), linjär gradient (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); Bakgrundsblandningsläge: Överlagring; Överlagret påverkar både bakgrunden som anges här, så du kan behöva vara försiktig om du inte vill att allt ska blandas ihop. Om vi vill undvika att allt blandas med bakgrundsfärgen, sätt det andra värdet till vanligt vilket kommer att gälla för vår andra bakgrundsbild.
#blend background-repeat: no-repeat; bakgrundsbild: url ('... /img/people-15.jpg'), linjär gradient (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); bakgrundsfärg: gul; Bakgrundsmixning: Överlagring, Normal; De background-clip egendom är ett verktyg som styr hur bakgrundsfärgen och bilden spänner inom CSS-innehållslådans modell. Liknande till box-dimensionering egendom, background-clip egendom tar tre giltiga värden, nämligen:
border-box är standardvärdet som spänner över bakgrundsbilden eller färgen hela vägen till elementets ytterkant.padding-box kommer att spänna över bakgrunden upp till ytterkanten av vadderingen, eller med andra ord; gränsens inre kant.innehåll-box kommer att behålla bakgrunden inom elementinnehållet som visas nedan:Ett praktiskt exempel där jag har hittat background-clip Att vara praktisk är när jag måste skapa en knapp med en ikon, med ett enda element. I följande demo spänner vår bild från vänster till höger om elementet, även om vi lägger på vadderingar på varje sida, eftersom det fortfarande gäller border-box.
Om vi vill omge ikonen med lite blankutrymme skulle vi traditionellt behöva pakka in det med ett annat element och applicera vaddering på det extra elementet. Använda background-clip egendom, vi kan göra det elegant genom att sätta det på innehåll-box, och ersätt vadderingen med gränser av samma färg som bakgrundsfärgen.
De bakgrund egendom är en som vi ofta använder i våra projekt. Förhoppningsvis har den här artikeln påmint dig om dess breda och varierade användningsområden, och jag ser fram emot att höra fler idéer i kommentarerna.
En sista anmärkning: Webbläsarstöd för dessa egenskaper (med undantag för bakgrund-blandning-mode) är bra. Enligt CanIUse stöds flera bakgrunder från Internet Explorer 9 och framåt, med bara några triviala problem. Alternativ för bakgrundsbild, till exempel background-clip egendom, är nästan lika bra.
Blandningslägen, vid skrivningstid, fungerar bäst i Chrome, Opera, är delvis tillämpliga i Safari på grund av några buggar, men tyvärr verkar inte ha gjort några tecken på framsteg med Microsoft Edge.
