7 CSS fono ypatybės, kurios pagyvins jūsų žiniatinklio dizainą

Jūsų svetainės fono tema gali labai paveikti jos išvaizdą. Spalvos, vaizdai ir fono raštai sukelia emocijas ir sukuria puikią vartotojo patirtį.

Norėdami nustatyti HTML elementų fono stilių, galite naudoti CSS fono ypatybes. Sužinokite viską apie kai kurias CSS ypatybes, kurias galite naudoti kurdami puikų foną.

1. fono spalva

The fono spalvos savybė nustato elemento fono spalvą. Galite nustatyti spalvą naudodami pavadinimą, pvz., "raudona", HEX reikšmę, pvz., "#00FF00" arba RGB reikšmę, pvz., "rgb (0, 255, 0)". Taip pat galite naudoti HSL reikšmę, norėdami nustatyti fono spalvą naudodami atspalvį, sodrumą ir šviesumą.

Toliau pateiktame pavyzdyje viso puslapio fono spalva nustatoma oranžine. Kiekvienas antraštės elementas turi skirtingą foną.

<kūnas>
<h2>Aš esu Žaliah2>
<h3>Aš esu Raudonah3>
<h4>Aš esu Mėlynah4>
kūnas>

Naudodami CSS, kiekvienam elementui galite pritaikyti unikalią fono spalvą:

kūnas {
fono spalva: oranžinė;
}
h2 {
fono spalva: #006600;
}
h3 {
fono spalva: rgb(128, 0, 0);
}
h4{
fono spalva: hsl(240, 100%, 50%);
}

Taip puslapis atrodys taip:

Elemento skaidrumui nustatyti galite naudoti nepermatomumo savybę. Nepermatomumo reikšmės yra nuo 0,0 iki 1,0. Kuo mažesnė vertė, tuo skaidresnis elementas.

Pavyzdžiui, pabandykite nustatyti kūno elemento neskaidrumą į 0,5:

kūnas {
fono spalva:oranžinė;
neskaidrumas:0.5;
}

Tai bus rodoma taip – ​​palyginkite spalvas su tomis, kurios buvo ankstesnėje ekrano kopijoje:

2. fono vaizdas

Ypatybė background-image nustato vaizdą kaip elemento foną. Galite nurodyti vietinį vaizdą arba vaizdą iš interneto.

<kūnas>
 <h1>Sveikiten!h1>
 <p>ašturėtianvaizdasinmanofone!p>
kūnas>

CSS failas:

kūnas {
fono vaizdas:url("https://vaizdai.pekselių.com/nuotraukos/1191710/pikselių-nuotrauka-1191710.jpeg?automatinis=suspausti&cs=tinysrgb&w=1260&h=750&dpr=1");
}

Tai bus rodoma taip:

Taip pat galite naudoti fono gradientai kad sukurtumėte unikalią savo programos išvaizdą.

3. fono kartojimas

Fono vaizdo ypatybė pakartoja vaizdus pagal numatytuosius nustatymus. Galite pasirinkti kartoti vaizdą horizontaliai x ašyje arba vertikaliai y ašyje.

Arba, jei kartojimas neatitinka jūsų stiliaus, galite jį pašalinti naudodami vertę nekartoti.

<kūnas>
<h1>Sveiki!h1>
<h3>Aš demonstruoju kartojimo fono kartojimo savybę x ašyje!h3>
kūnas>

Naudokite šį CSS, kad pritaikytumėte pasikartojantį foną išilgai x ašies:

kūnas {
fono vaizdas: url("https://vaizdai.pekselių.com/nuotraukos/459335/pikselių-nuotrauka-459335.jpeg?automatinis=suspausti&cs=tinysrgb&w=1260&h=750&dpr=1");
fono kartojimas: kartoti-x;
}

Rezultatas:

Tada pabandykite pakartoti vaizdą y ašyje:

kūnas {
fono vaizdas:url("https://cdn.pixabay.com/nuotrauka/2016/04/18/22/05/jūros kriauklės-1337565__340.jpg");
fono kartojimas:pakartokite-y;
}

Rezultatas:

Pavyzdys y ašyje tikrai atrodo iškraipytas. Jei tai ne tie modeliai, kurių ieškote, galite nurodyti nekartoti vietoj to:

kūnas {
fono vaizdas:url("https://vaizdai.pekselių.com/nuotraukos/259915/pikseliai-nuotrauka-259915.jpeg?automatinis=suspausti&cs=tinysrgb&w=600");
fono kartojimas:ne-kartoti;
}

Rezultatas:

4. fono padėtis

Fono padėties ypatybė apibrėžia fono paveikslėlio padėtį jo elemente. Jame naudojami su pozicija susiję raktiniai žodžiai, pvz centras, viršuje, ir apačioje, arba pikselio arba procentinės reikšmės.

Pridėkite fono padėties ypatybę prie paskutinio vaizdo:

kūnas {
fono vaizdas: url("https://vaizdai.pekselių.com/nuotraukos/259915/pikseliai-nuotrauka-259915.jpeg?automatinis=suspausti&cs=tinysrgb&w=600");
fono padėtis: viršujecentras;
}

Tai atrodys taip:

Matote, kad vaizdas iškraipo svetainės išvaizdą. Pataisykime tai su kita nuosavybe.

5. fono dydžio

Galite naudoti fono paveikslėlio ypatybę, kad nustatytumėte konkretų vaizdo dydį. Jis naudoja tokius raktinius žodžius kaip viršelis ir turėti arba pikselio arba procentinės reikšmės. Pataisykime iškraipytą fono vaizdą pridėdami fono dydžio savybę.

kūnas {
 fono vaizdas: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 fono kartojimas: nekartoti;
 fono padėtis: centras;

Rezultatas rodo, kad vaizdas dabar proporcingai dengia tinklalapį.

6. fonas-priedas

Fono priedo ypatybė apibrėžia, ar fono vaizdo padėtis išlieka fiksuota, ar slenka. Galite naudoti fiksuotus raktinius žodžius arba slinkti.

Parodykime tai šiame kode:

<kūnas>
<h1>Fono priedo ypatybėh1>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
<p>Naudodami fiksuoto priedo savybę pastebėsite, kad fonas nejuda kartu su tekstu.p>
kūnas>

CSS failas:

kūnas {
fono vaizdas: url("https://vaizdai.pekselių.com/nuotraukos/96627/pikselių-nuotrauka-96627.jpeg?automatinis=suspausti&cs=tinysrgb&w=600");
fono kartojimas: nekartoti;
fono padėtis: centras;
fono dydžio: viršelis;
fonas-priedas: fiksuotas;
}

Jei pereisite žemyn puslapyje, pastebėsite, kad fonas nejuda:

Norėdami parodyti slinkimo fono priedo ypatybę, pakeiskite raktinį žodį į slinkti. Pastebėsite, kad dabar fonas juda kartu su tekstu.

kūnas {
fono vaizdas: url("https://vaizdai.pekselių.com/nuotraukos/96627/pikselių-nuotrauka-96627.jpeg?automatinis=suspausti&cs=tinysrgb&w=600");
fono kartojimas: nekartoti;
fono padėtis: centras;
fono dydžio: viršelis;
fonas-priedas: slinkti;
}

7. Foninė stenografijos savybė

Galite pastebėti, kad norint gauti tobulą foną, reikia įtraukti keletą savybių. Tai apima daug kodo rašymą. Tačiau kodą galite sutrumpinti naudodami fono stenografijos ypatybę.

Sutrumpinimo ypatybė leidžia vienoje eilutėje nustatyti daug fono ypatybių. Jūs naudojate raktinį žodį fone stenografinei savybei nustatyti.

Pavyzdžiui, užuot rašę kodą taip:

kūnas {
fono spalva: žalias;
fono vaizdas: url("nešiojamas kompiuteris 3.jpg");
fono kartojimas: nekartoti;
fono dydžio: viršelis;
fono priedas: slinkti;
fono padėtis: centras;
}

Galite parašyti vienoje eilutėje, pavyzdžiui:

kūnas {
fone: žaliasurl("nešiojamas kompiuteris 3.jpg") nekartotiviršelisslinkticentras;
}

Trumpojo rašto savybė atitinka tam tikrą tvarką. Turite lygiuoti ypatybes tokia tvarka, net jei trūksta vienos ar kelių. Užsakymas yra toks:

• fono spalva
• fono vaizdas
• fono kartojimas
• fonas-priedas
• fono padėtis

Galite sukurti įdomius dizainus naudodami CSS naudodami įvairius fono raštai. Naudodami šiuos modelius galite sukurti unikalų ir išskirtinį savo svetainės foną.

Kitos CSS fono ypatybės

CSS yra galingas ir su juo galite daug nuveikti, kad paįvairintumėte savo programą. Norėdami pridėti animacijos, galite naudoti tokias ypatybes kaip fono klipas, fono kilmė ir fono maišymo režimas.

Taip pat galite naudoti gradientus ir šablonus, kad tinkintumėte savo puslapius. Eksperimentuokite su CSS fono ypatybėmis, kad patobulintumėte savo žiniatinklio kūrimo įgūdžius.