Share
Vi har bygget en komplett guide for å hjelpe deg med å lære CSS, enten du er bare i gang med det grunnleggende eller du vil utforske mer avansert CSS.
I denne opplæringen skal vi se på en av de eldre, mer kjente CSS-egenskapene: bakgrunn. bakgrunn er en av flere CSS egenskaper som ofte overses. Faktisk så det en oppgradering med CSS3, som mottok nye evner utover bare å legge til et bakgrunnsbilde eller en farge. La oss se på noen av dem!
Plassering av bakgrunnsbilde er grei og noe du sannsynligvis er kjent med allerede. Hvis vi vil plassere bakgrunnen nederst til høyre på elementet, søker vi Nede til høyre til Bakgrunnen-stilling. For eksempel:
#workspace bredde: 100%; maksimal bredde: 668px; høyde: 400px; bakgrunnsfarge: # 525d62; bakgrunnsbilde: url (bilder / macbook.png); bakgrunn-gjentak: ikke-gjenta; bakgrunnsposisjon: høyre bunn;
Eller med stenografi, bakgrunn, etter URL-definisjonen:
#workspace bredde: 100%; maksimal bredde: 668px; høyde: 400px; bakgrunn: # 525d62 url (bilder / macbook.png) no-repeat høyre bunn;
Siden adventen til CSS3 har vi kunnet spesifisere posisjonen offset; de nøyaktige avstandene til stillingene som er satt. Tar vårt eksempel på Nede til høyre, vi inkluderer bunn 20px høyre 30px å plassere bakgrunnen vår på 20px fra bunnen og 30px fra venstre.
#workspace bredde: 100%; maksimal bredde: 668px; høyde: 400px; bakgrunnsfarge: # 525d62; bakgrunnsbilde: url (bilder / macbook.png); bakgrunn-gjentak: ikke-gjenta; bakgrunnsposisjon: høyre 30px bunn 20px;
Stillingene (bunn, topp, Ikke sant, venstre) kan defineres i hvilken som helst rekkefølge, men offset lengden må defineres etter hver bakgrunnsposisjon.
Kreditt går til Metin Kazan for illustrasjonene.
De bakgrunn Egenskapen tillater oss også å legge til flere bakgrunnsbilder. Derfor, la oss utvide vårt forrige eksempel med flere ting og gadgets.
Vi legger disse bildene til en enkelt bakgrunn eller bakgrunnsbilde erklæring ved å skille hver med et komma. Vi bruker Bakgrunnen-stilling eiendom, som også aksepterer flere verdier, for å kontrollere hvert av disse bakgrunnsbildene.
#workspace høyde: 400px; bakgrunnsfarge: # 525d62; bakgrunnsbilde: url (bilder / macbook.png), url (bilder / mus.png), url (bilder / hdd.png), url (bilder / telefon.png), url (bilder / ipad.png), url (bilder / coffee.png), url (images / camera.png); bakgrunn-gjentak: ikke-gjenta; bakgrunnsposisjon: 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 bruke faste enheter (for eksempel piksler), fleksible enheter (for eksempel prosenter), eller en kombinasjon av de to.
Hvert par verdier representerer koordinater fra øverst til venstre av beholderelementet, til øverst til venstre av bildet. For eksempel er øverst til venstre på kamerabildet 280px fra toppen av beholderen, deretter 7% av tilgjengelig bredde over fra venstre.
Merk: Den tilgjengelig Bredden er den totale bredden på beholderelementet, minus bredden på bakgrunnsbildet. Derfor vises et bakgrunnsbilde som er plassert 50% langs x-aksen, nøyaktig sentrert!
Videre, siden Bakgrunnen-stilling er en animerbar eiendom, kan vi skape en mer livlig, overbevisende bakgrunn:
#workspace width: 600px; høyde: 400px; bakgrunnsfarge: # 525d62; bakgrunn-gjentak: ikke-gjenta; bakgrunnsbilde: url (bilder / macbook.png), url (bilder / mus.png), url (bilder / hdd.png), url (bilder / telefon.png), url (bilder / ipad.png), url (bilder / coffee.png), url (images / camera.png); bakgrunnsposisjon: 50% 50%, 430px 295px, 425px 230px, 480px 240px, 105px 250px, 120px 190px, 40px 280px; animasjon: 3s lette 0s inView fremover; @keyframes inView 0% bakgrunnsposisjon-y: 600%, 451px, -448px, 240px, 496px, -44px, 280px; bakgrunnsstilling-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 20% bakgrunnsposisjon-y: 50%, 451px, -448px, 240px, 496px, -44px, 280px; bakgrunnsstilling-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 30% bakgrunnsposisjon-y: 50%, 295px, -448px, 240px, 496px, -44px, 280px; bakgrunnsstilling-x: 50%, 75%, 75%, 200%, 20%, 22%, -100%; 40% bakgrunnsposisjon-y: 50%, 295px, 230px, 240px, 250px, -44px, 280px; bakgrunnsstilling-x: 50%, 75%, 75%, 200%, 0%, 22%, -100%; 50% bakgrunnsposisjon-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; bakgrunnsstilling-x: 50%, 75%, 75%, 96%, 0%, 22%, -100%; 60% bakgrunnsposisjon-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px; bakgrunnsstilling-x: 50%, 75%, 75%, 96%, 0%, 22%, 7%; 100% bakgrunnsposisjon-y: 50%, 295px, 230px, 240px, 250px, 190px, 280px;
Her har vi satt opp en rekke keyframes langs en tidslinje. På hver keyframe har vi endret Bakgrunnen-stilling-x og background-posisjon-y av hvert bakgrunnsbilde. Animasjonen er ganske vist rudimentær, så vær så snill å gaffel kodepennen og forbedre den!
Merk: Klikk Kjør nederst til høyre på pennen for å se animasjonen
Bakgrunnene vi brukte bestilles sekvensielt; det aller første oppført vises øverst på stakken, mens den sistnevnte vises, vises nederst i bakgrunnsstakken.
#workspace width: 600px; høyde: 400px; bakgrunnsfarge: # 525d62; bakgrunnsbilde: url (bilder / macbook.png), url (bilder / mus.png), url (bilder / hdd.png), url (bilder / telefon.png), url (bilder / ipad.png), url (bilder / coffee.png), url (images / camera.png); / * stablet nederst * / bakgrunns-gjentak: nei-gjenta;
Alle bakgrunnsunderliggende egenskaper (background-repeat, background-size, Bakgrunnen-stilling etc.) kan defineres flere ganger, bortsett fra bakgrunnsfarge. Hvis vi bruker flere bakgrunner ved bruk av stenografi bakgrunn eiendom, definer bakgrunnsfargen som den siste verdien for å tre i kraft. For eksempel:
#workspace høyde: 400px; bakgrunn: url (bilder / macbook.png) 50% 50% ikke-gjenta, url (bilder / mouse.png) 430px 295px no-repeat, url (images / camera.png) 425px 230px no-repeat # 525d62;
Alternativt, legg til et eget bakgrunnsfarge, etter den korte eiendommen:
#workspace width: 600px; høyde: 400px; bakgrunn: url (bilder / macbook.png) 50% 50% no-repeat, url (bilder / mouse.png) 430px 295px no-repeat, url (bilder / kamera.png) 425px 230px no-repeat; bakgrunnsfarge: # 525d62;
Begge disse kodene gjør det samme, men jeg finner sistnevnte å være mer intuitiv og lesbar.
De Bakgrunnen-blanding-modus gjør det samme som i grafikkprogrammer som Photoshop eller Gimp; det blander bakgrunnsbilder til hverandre, så vel som hva som er under.
De Bakgrunnen-blanding-modus tar kjente verdier som overlegg og multiplisere blant noen andre som Jonathan Cutrell gjør en fantastisk jobb med å forklare i sin veiledning om emnet. Jeg anbefaler deg å lese det gjennom så vi kan hoppe inn i noen praktiske eksempler.
Det finnes flere måter å bruke CSS Blend Mode til å lage slående design, for eksempel å blande en gradient med et bilde, som Ian Yates påpeker i sin inspirasjon:
For å opprette denne effekten legger vi til et bakgrunnsbilde og en gradient, og bruker overlegg blandingsmodus.
Accentsconagua
#blend background-repeat: no-repeat; bakgrunnsbilde: url ('img / people-15.jpg'), lineær gradient (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); Bakgrunnsblandingsmodus: Overlegg; Overlegget påvirker begge bakgrunnene som er oppført her, så du må kanskje være forsiktig hvis du ikke vil at alt skal blandes sammen. Hvis vi vil unngå at alt blandes med bakgrunnsfargen, må du sette den andre verdien til normal som vil gjelde for vårt andre bakgrunnsbilde.
#blend background-repeat: no-repeat; bakgrunnsbilde: url ('... /img/people-15.jpg'), lineær gradient (135deg, rgba (175,0,79,1) 0%, rgba (255,114,187,1) 100%); bakgrunnsfarge: gul; Bakgrunnsblandingsmodus: Overlegg, Normal; De bakgrunn klype Egenskapen er et verktøy som styrer hvordan bakgrunnsfargen og bildet spenner innenfor CSS-innholdsrammen. Ligner på box-sizing eiendom, bakgrunn klype Eiendommen tar tre gyldige verdier, nemlig:
border-box er standardverdien som spenner over bakgrunnsbildet eller fargen helt til den ytre kanten av elementet.padding-box vil spenne bakgrunnen opp til ytterkanten av polstring, eller med andre ord; den indre kanten av grensen.Innholdet-box vil bevare bakgrunnen i elementinnholdet som vist nedenfor:Et praktisk eksempel der jeg har funnet bakgrunn klype å være nyttig er når jeg må lage en knapp med et ikon, ved hjelp av et enkelt element. I den følgende demonstrasjonen spenner bildet vårt fra venstre til høyre kant av elementet, selv om vi legger til polstring på hver side, siden det fortsatt gjelder border-box.
Hvis vi ønsker å omgjøre ikonet med litt hvite plass, ville vi tradisjonelt måtte pakke det med et annet element og legge på det ekstra elementet. Bruker bakgrunn klype eiendom, vi er i stand til å gjøre det elegant ved å sette det til Innholdet-box, og erstatt fyllingen med grenser av samme farge som bakgrunnsfargen.
De bakgrunn Eiendom er en som vi ofte bruker i våre prosjekter. Forhåpentligvis har denne artikkelen påminnet deg om sin brede og varierte bruk, og jeg gleder meg til å høre flere ideer i kommentarene.
Ett siste notat: Nettleserstøtte for disse egenskapene (med unntak av Bakgrunnen-blanding-modus) Er bra. Ifølge CanIUse støttes flere bakgrunner fra Internet Explorer 9 og fremover, med bare et par trivielle problemer. Alternativer for bakgrunnsbilde, for eksempel bakgrunn klype eiendom, er nesten like bra.
Blendingmodus, i skrivende stund, fungerer best i Chrome, Opera, er delvis anvendelig i Safari på grunn av noen få feil, men synes dessverre ikke å ha gjort tegn på fremgang med Microsoft Edge.
