Možda mislite da je dizajn pozadine jednostavan, ali CSS ima mnogo opskurnih i moćnih svojstava koja možete naučiti.
Pozadinska tema vaše web stranice može značajno utjecati na njen izgled i dojam. Boje, slike i pozadinski uzorci izazivaju emocije i stvaraju izvrsna korisnička iskustva.
Svojstva pozadine CSS-a možete koristiti za postavljanje stila pozadine HTML elemenata. Saznajte sve o nekim CSS svojstvima koja možete koristiti za stvaranje izvrsnih pozadina.
1. boja pozadine
The svojstvo boje pozadine postavlja boju pozadine elementa. Boju možete postaviti koristeći naziv poput "crvena", HEX vrijednost poput "#00FF00" ili RGB vrijednost - poput "rgb (0, 255, 0)". Također možete koristiti HSL vrijednost za postavljanje boje pozadine pomoću nijanse, zasićenosti i svjetline.
Sljedeći primjer postavlja boju pozadine cijele stranice na narančastu. Svaki od elemenata naslova dobiva različitu pozadinu.
<tijelo>
<h2>Ja sam Zelenih2>
<h3>Ja sam Crvenih3>
<h4>Ja sam Blueh4>
tijelo>Pomoću CSS-a možete primijeniti jedinstvenu boju pozadine na svaki element:
tijelo {
boja pozadine: naranča;
}h2 {
boja pozadine: #006600;
}h3 {
boja pozadine: rgb(128, 0, 0);
}
h4{
boja pozadine: hsl(240, 100%, 50%);
}
Time će stranica izgledati ovako:
Svojstvo neprozirnosti možete koristiti za određivanje prozirnosti elementa. Neprozirnost ima vrijednosti između 0,0 i 1,0. Što je niža vrijednost, to je element transparentniji.
Kao primjer, pokušajte postaviti neprozirnost elementa tijela na 0,5:
tijelo {
boja pozadine:naranča;
neprozirnost:0.5;
}Ovo će se prikazati na sljedeći način—usporedite boje s onima na prethodnoj snimci zaslona:
2. pozadinska slika
Svojstvo background-image postavlja sliku kao pozadinu elementa. Možete referencirati lokalnu sliku ili neku s interneta.
<tijelo>
<h1>zdravotamo!h1>
<str>jaimatianslikaumojpozadina!str>
tijelo>CSS datoteka:
tijelo {
pozadinska slika:url("https://slike.pekseli.com/fotografije/1191710/pexels-fotografija-1191710.jpeg?auto=oblog&cs=tinysrgb&w=1260&h=750&dpr=1");
}Ovo će se prikazati ovako:
Također možete koristiti pozadinski gradijenti za stvaranje jedinstvenog izgleda vaše aplikacije.
3. pozadinsko ponavljanje
Svojstvo background-image ponavlja slike prema zadanim postavkama. Možete odabrati ponavljanje slike vodoravno na x-osi ili okomito na y-osi.
Alternativno, ako ponavljanje ne odgovara vašem stilu, možete ga ukloniti pomoću vrijednosti nema-ponoviti.
<tijelo>
<h1>Pozdrav!h1>
<h3>Demonstriram svojstvo ponavljanja pozadine-ponavljanja na x-osi!h3>
tijelo>Upotrijebite sljedeći CSS za primjenu pozadine koja se ponavlja duž x-osi:
tijelo {
pozadinska slika: url("https://slike.pekseli.com/fotografije/459335/pexels-fotografija-459335.jpeg?auto=oblog&cs=tinysrgb&w=1260&h=750&dpr=1");
pozadinsko ponavljanje: ponovi-x;
}Rezultat:
Zatim pokušajte ponoviti sliku na y-osi:
tijelo {
pozadinska slika:url("https://cdn.pixabay.com/fotografija/2016/04/18/22/05/školjke-1337565__340.jpg");
pozadinsko ponavljanje:repeat-y;
}Rezultat:
Primjer na y-osi svakako izgleda iskrivljeno. Ako ovo nisu obrasci koje tražite, možete navesti nema-ponoviti umjesto toga:
tijelo {
pozadinska slika:url("https://slike.pekseli.com/fotografije/259915/pexels-fotografija-259915.jpeg?auto=oblog&cs=tinysrgb&w=600");
pozadinsko ponavljanje:nema ponavljanja;
}Rezultat:
4. pozadina-položaj
Svojstvo background-position definira položaj pozadinske slike unutar njenog elementa. Koristi ključne riječi specifične za poziciju kao što su centar, vrh, i dno, ili vrijednost piksela ili postotka.
Dodajte svojstvo položaja pozadine posljednjoj slici:
tijelo {
pozadinska slika: url("https://slike.pekseli.com/fotografije/259915/pexels-fotografija-259915.jpeg?auto=oblog&cs=tinysrgb&w=600");
pozadina-položaj: vrhcentar;
}Izgledat će ovako:
Možete vidjeti da slika iskrivljuje izgled web stranice. Popravimo to sa sljedećim svojstvom.
5. veličina pozadine
Svojstvo pozadinske slike možete koristiti za definiranje određene veličine slike. Koristi ključne riječi poput pokriti i sadržavati ili vrijednost piksela ili postotka. Popravimo iskrivljenu pozadinsku sliku dodavanjem svojstva veličine pozadine.
tijelo {
pozadinska slika: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
pozadinsko ponavljanje: bez ponavljanja;
položaj pozadine: centar;Rezultat pokazuje da slika sada proporcionalno pokriva web stranicu.
6. pozadina-prilog
Svojstvo background-attachment definira hoće li položaj pozadinske slike ostati fiksan ili se pomiče. Možete koristiti fiksne ključne riječi ili pomicanje.
Pokažimo to u sljedećem kodu:
<tijelo>
<h1>Svojstvo pozadinskog privitkah1>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
<str>Uz svojstvo fiksnog privitka primijetit ćete da se pozadina ne miče s tekstom.str>
tijelo>CSS datoteka:
tijelo {
pozadinska slika: url("https://slike.pekseli.com/fotografije/96627/pexels-fotografija-96627.jpeg?auto=oblog&cs=tinysrgb&w=600");
pozadinsko ponavljanje: nema-ponoviti;
pozadina-položaj: centar;
veličina pozadine: pokriti;
pozadina-prilog: fiksni;
}Ako se pomaknete niz stranicu, primijetit ćete da se pozadina ne pomiče:
Da biste demonstrirali svojstvo privitka pozadine pomicanja, promijenite ključnu riječ u svitak. Primijetit ćete da se sada pozadina pomiče s tekstom.
tijelo {
pozadinska slika: url("https://slike.pekseli.com/fotografije/96627/pexels-fotografija-96627.jpeg?auto=oblog&cs=tinysrgb&w=600");
pozadinsko ponavljanje: nema-ponoviti;
pozadina-položaj: centar;
veličina pozadine: pokriti;
pozadina-prilog: svitak;
}7. Svojstvo stenografije u pozadini
Možda ćete primijetiti da morate uključiti nekoliko svojstava da biste dobili savršenu pozadinu. To uključuje pisanje puno koda. Ali možete skratiti kod koristeći svojstvo pozadinske stenografije.
Svojstvo stenografije omogućuje vam postavljanje mnogih svojstava pozadine u jednom retku. Koristite ključnu riječ pozadina za postavljanje svojstva stenografije.
Na primjer, umjesto pisanja ovakvog koda:
tijelo {
boja pozadine: zelena;
pozadinska slika: url("prijenosno računalo3.jpg");
pozadinsko ponavljanje: nema-ponoviti;
veličina pozadine: pokriti;
pozadina-prilog: svitak;
pozadina-položaj: centar;
}Možete ga napisati u jednom retku, ovako:
tijelo {
pozadina: zelenaurl("prijenosno računalo3.jpg") nema-ponovitipokritisvitakcentar;
}Svojstvo stenografije slijedi određeni redoslijed. Morate poravnati svojstva tim redoslijedom čak i ako jedno ili više njih nedostaje. Redoslijed je:
- boja pozadine
- pozadinska slika
- pozadinsko ponavljanje
- pozadina-prilog
- pozadina-položaj
Možete stvoriti zanimljive dizajne pomoću CSS-a koristeći različite uzorci pozadine. Pomoću ovih uzoraka možete postići jedinstvene i izvanredne pozadine za svoju web stranicu.
Ostala svojstva pozadine u CSS-u
CSS je moćan i s njim možete učiniti mnogo toga kako biste začinili svoju aplikaciju. Možete upotrijebiti svojstva kao što su background-clip, background-origin i background-blend-mode za dodavanje neke animacije.
Također možete koristiti gradijente i uzorke za prilagodbu stranica. Eksperimentirajte sa svojstvima CSS pozadine kako biste izoštrili svoje vještine web dizajna.
