7 CSS fona īpašības, lai atdzīvinātu jūsu tīmekļa dizainu

Jūsu vietnes fona tēma var būtiski ietekmēt tās izskatu un darbību. Krāsas, attēli un fona raksti izraisa emocijas un rada lielisku lietotāja pieredzi.

Varat izmantot CSS fona rekvizītus, lai iestatītu HTML elementu fona stilu. Uzziniet visu par dažiem CSS rekvizītiem, kurus varat izmantot, lai izveidotu izcilu fonu.

1. fona krāsa

The fona krāsas īpašums iestata elementa fona krāsu. Varat iestatīt krāsu, izmantojot nosaukumu, piemēram, "sarkans", HEX vērtību, piemēram, "#00FF00" vai RGB vērtību, piemēram, "rgb (0, 255, 0)". Varat arī izmantot HSL vērtību, lai iestatītu fona krāsu, izmantojot nokrāsu, piesātinājumu un gaišumu.

Nākamajā piemērā visas lapas fona krāsa ir iestatīta uz oranžu. Katram virsraksta elementam ir atšķirīgs fons.

<ķermeni>
<h2>Es esmu Zaļaish2>
<h3>Es esmu Redh3>
<h4>Es esmu Blueh4>
ķermeni>

Izmantojot CSS, katram elementam varat lietot unikālu fona krāsu:

ķermeni {
fona krāsa: apelsīns;
}
h2 {
fona krāsa: #006600;
}
h3 {
fona krāsa: rgb(128, 0, 0);
}
h4{
fona krāsa: hsl(240, 100%, 50%);
}

Tādējādi lapa tiks veidota šādi:

Varat izmantot necaurredzamības īpašību, lai noteiktu elementa caurspīdīgumu. Necaurredzamības vērtības ir no 0,0 līdz 1,0. Jo zemāka vērtība, jo caurspīdīgāks ir elements.

Piemēram, mēģiniet iestatīt ķermeņa elementa necaurredzamību uz 0,5:

ķermeni {
fona krāsa:apelsīns;
necaurredzamība:0.5;
}

Tas tiks parādīts šādi — salīdziniet krāsas ar iepriekšējā ekrānuzņēmuma krāsām:

2. fona attēls

Rekvizīts background-image iestata attēlu kā elementa fonu. Varat atsaukties uz vietējo attēlu vai attēlu no interneta.

<ķermeni>
 <h1>Sveikitur!h1>
 <lpp>esiranattēluiekšāmansfons!lpp>
ķermeni>

CSS fails:

ķermeni {
fona attēls:url("https://attēlus.pekseļi.com/fotogrāfijas/1191710/pekseļi-foto-1191710.jpeg?auto=saspiest&cs=tinysrgb&w=1260&h=750&dpr=1");
}

Tas tiks parādīts šādi:

Varat arī izmantot fona gradienti lai jūsu lietojumprogrammai izveidotu unikālu izskatu.

3. fona atkārtojums

Fona attēla rekvizīts pēc noklusējuma atkārto attēlus. Varat izvēlēties atkārtot attēlu horizontāli uz x ass vai vertikāli uz y ass.

Alternatīvi, ja atkārtojums neatbilst jūsu stilam, varat to noņemt, izmantojot vērtību nē-atkārtoties.

<ķermeni>
<h1>Sveiki!h1>
<h3>Es demonstrēju atkārtojuma fona atkārtošanas īpašību uz x ass!h3>
ķermeni>

Izmantojiet šādu CSS, lai lietotu atkārtojošu fonu gar x asi:

ķermeni {
fona attēls: url("https://attēlus.pekseļi.com/fotogrāfijas/459335/pekseļi-foto-459335.jpeg?auto=saspiest&cs=tinysrgb&w=1260&h=750&dpr=1");
fona atkārtojums: atkārtojiet-x;
}

Rezultāts:

Pēc tam mēģiniet atkārtot attēlu uz y ass:

ķermeni {
fona attēls:url("https://cdn.pixabay.com/foto/2016/04/18/22/05/gliemežvāki-1337565__340.jpg");
fona atkārtojums:atkārtot-y;
}

Rezultāts:

Piemērs uz y ass noteikti izskatās izkropļots. Ja tie nav meklētie modeļi, varat norādīt nē-atkārtoties vietā:

ķermeni {
fona attēls:url("https://attēlus.pekseļi.com/fotogrāfijas/259915/pekseļi-foto-259915.jpeg?auto=saspiest&cs=tinysrgb&w=600");
fona atkārtojums:nē-atkārtoties;
}

Rezultāts:

4. fona pozīcija

Fona pozīcijas rekvizīts nosaka fona attēla pozīciju tā elementā. Tas izmanto pozīcijai raksturīgus atslēgvārdus, piemēram, centrs, tops, un apakšā, vai pikseļa vai procentuālās vērtības.

Pievienojiet pēdējam attēlam fona pozīcijas rekvizītu:

ķermeni {
fona attēls: url("https://attēlus.pekseļi.com/fotogrāfijas/259915/pekseļi-foto-259915.jpeg?auto=saspiest&cs=tinysrgb&w=600");
fona pozīcija: topscentrs;
}

Tas izskatīsies šādi:

Var redzēt, ka attēls kropļo vietnes izskatu. Novērsīsim to ar nākamo īpašumu.

5. fona izmērs

Varat izmantot fona attēla rekvizītu, lai definētu konkrētu attēla izmēru. Tas izmanto tādus atslēgvārdus kā piesegt un satur vai pikseļa vai procentuālā vērtība. Izlabosim izkropļoto fona attēlu, pievienojot fona izmēra rekvizītu.

body {
 fona attēls: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 fona atkārtojums: neatkārtot;
 fona pozīcija: centrs;

Rezultāts parāda, ka attēls tagad proporcionāli pārklāj tīmekļa lapu.

6. fona pielikums

Fona pielikuma rekvizīts nosaka, vai fona attēla pozīcija paliek fiksēta vai ritinās. Varat izmantot fiksētos atslēgvārdus vai ritināt.

Parādīsim to šādā kodā:

<ķermeni>
<h1>Fona pielikuma rekvizītsh1>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
<lpp>Izmantojot fiksēto pielikuma rekvizītu, jūs ievērosiet, ka fons nepārvietojas kopā ar tekstu.lpp>
ķermeni>

CSS fails:

ķermeni {
fona attēls: url("https://attēlus.pekseļi.com/fotogrāfijas/96627/pekseļi-foto-96627.jpeg?auto=saspiest&cs=tinysrgb&w=600");
fona atkārtojums: nē-atkārtoties;
fona pozīcija: centrs;
fona izmērs: piesegt;
fona pielikums: fiksēts;
}

Ja virzīsit lapu uz leju, pamanīsit, ka fons nepārvietojas:

Lai parādītu ritināšanas fona pielikuma rekvizītu, mainiet atslēgvārdu uz ritiniet. Jūs ievērosiet, ka tagad fons pārvietojas kopā ar tekstu.

ķermeni {
fona attēls: url("https://attēlus.pekseļi.com/fotogrāfijas/96627/pekseļi-foto-96627.jpeg?auto=saspiest&cs=tinysrgb&w=600");
fona atkārtojums: nē-atkārtoties;
fona pozīcija: centrs;
fona izmērs: piesegt;
fona pielikums: ritiniet;
}

7. Fona stenogrāfijas īpašums

Jūs varat pamanīt, ka jums ir jāiekļauj vairāki rekvizīti, lai iegūtu perfektu fonu. Tas ietver daudz koda rakstīšanu. Bet jūs varat saīsināt kodu, izmantojot fona saīsinājuma rekvizītu.

Īsraksta rekvizīts ļauj vienā rindā iestatīt daudzus fona rekvizītus. Jūs izmantojat atslēgvārdu fons lai iestatītu stenogrammas īpašību.

Piemēram, tā vietā, lai rakstītu kodu šādi:

ķermeni {
fona krāsa: zaļš;
fona attēls: url("klēpjdators3.jpg");
fona atkārtojums: nē-atkārtoties;
fona izmērs: piesegt;
fona pielikums: ritiniet;
fona pozīcija: centrs;
}

To var ierakstīt vienā rindā, piemēram:

ķermeni {
fons: zaļšurl("klēpjdators3.jpg") nē-atkārtotiespiesegtritinietcentrs;
}

Īsraksta rekvizīts atbilst noteiktai secībai. Rekvizīti ir jāizlīdzina šādā secībā, pat ja trūkst viena vai vairāku. Pasūtījums ir:

• fona krāsa
• fona attēls
• fona atkārtojums
• fona pielikums
• fona pozīcija

Jūs varat izveidot interesantus dizainus ar CSS, izmantojot dažādus fona raksti. Izmantojot šos modeļus, varat iegūt unikālu un izcilu savas vietnes fonu.

Citi CSS fona rekvizīti

CSS ir jaudīgs, un ar to varat daudz darīt, lai uzlabotu savu lietojumprogrammu. Lai pievienotu animāciju, varat izmantot tādus rekvizītus kā fona klips, fona izcelsme un fona sajaukšanas režīms.

Varat arī izmantot gradientus un modeļus, lai pielāgotu lapas. Eksperimentējiet ar CSS fona īpašībām, lai uzlabotu savas tīmekļa dizaina prasmes.