CSS ir saīsinājums no kaskādes stila lapām. Tā ir vienkārša, tomēr spēcīga dizaina valoda, kurai ir iespēja pārveidot tīmekļa lapas. Vienkārši sakot, tas racionalizē tīmekļa lapu padarīšanas reprezentablu un ar lietotāju palīdzību pievilcīgu . Šajā rakstā mēs sapratīsim, kā CSS ieviest dažādus fona attēlus šādā secībā:
- Fona attēls CSS rekvizītos
- Fona attēls CSS
- Atkārtojiet fonu
- Fona pielikums
- Fona pozīcija
- Fona attēls CSS izmērā
- Fona krāsa
Fona attēls CSS rekvizītos
Ir daudz īpašību, kuras tiek izmantotas, lai kontrolētu attēla uzvedību un pozicionēšanu. Šīs īpašības ir:
- fona attēls
- fona atkārtojums
- fona piestiprināšana
- background-position
- fona lielums
- fona krāsa
Mēs iepazīsimies ar katru no šīm īpašībām un redzēsim, kad un kā tos izmantot, ar kādu interesantu demonstrāciju.
Fona attēls CSS
The fona attēls rekvizīts, kā norāda nosaukums, tiek vienkārši izmantots, lai norādītu un iestatītu fona attēlu, izmantojot tīmekļa lapas elementu. Fona attēls pēc noklusējuma tiek ievietots elementa augšējā kreisajā stūrī.
sintakse: fona attēls: url | nav | lineārs-gradients | radiāls-gradients
pamatteksts {background-image: url ('apple.jpg')}fons, izmantojot URL
Sapratīsim parametrus:
- URL: Šī parametra ievade ļauj mums norādīt faila ceļu uz jebkuru attēlu vai attēla URL, kas jāiestata kā fons. Lai deklarētu vairākus attēlus, URL tiek atdalīti ar komatu atdalītāju.
pamatteksts {background-image: url ('apple.jpg')} 
- neviens: Šī ir rekvizīta noklusējuma vērtība, un fona attēls netiek renderēts, ja tā vērtība ir norādīta.
body {background: none}- lineārs gradients (): Fona attēls ir iestatīts uz lineāru gradientu. Šim īpašumam ir jāprecizē vismaz divas krāsas, ti, no augšas uz leju.
ķermeņa {fona krāsa: # 001 fona attēls: lineārs gradients (balts 15%, caurspīdīgs 16%), lineārs gradients (balts 15%, caurspīdīgs 16%) fona izmērs: 60 pikseļi 60 pikseļi fona stāvoklis: 0 0, 30 pikseļi 30 pikseļi}c ++ izmanto nosaukumvietu
- radiālais gradients (): Fona attēls ir iestatīts uz radiālo gradientu. Šim īpašumam ir jāprecizē vismaz divas krāsas, ti, centram līdz malām.
ķermeņa {fona krāsa: # 001 fona attēls: radiālais gradients (balts 15%, caurspīdīgs 16%), radiālais gradients (balts 15%, caurspīdīgs 16%) fona izmērs: 60 pikseļi 60 pikseļi fona stāvoklis: 0 0, 30 pikseļi 30 pikseļi}- atkārtojošs-lineārs-gradients (): Tas atkārto lineāru gradientu. Izmantosim to pašu piemēru, ko mēs redzējām iepriekš lineārajā gradientā, atkārtojot-lineāru-gradientu, un redzēsim atšķirību.
ķermeņa {fona krāsa: # 001 fona attēls: atkārtojošs-lineārs-gradients (balts 15%, caurspīdīgs 16%), atkārtojošs-lineārs-gradients (balts 15%, caurspīdīgs 16%) fona izmērs: 60 pikseļi 60 pikseļu fona stāvoklis : 0 0, 30 pikseļi 30 pikseļi}- atkārtojošais radiālais gradients (): Tas atkārto radiālo gradientu. Apskatīsim to pašu piemēru, kuru izmantojām iepriekš, radiālā gradientā.
ķermeņa {fona krāsa: # 001 fona attēls: atkārtojošs radiālais gradients (balts 15%, caurspīdīgs 16%), atkārtojošs radiālais gradients (balts 15%, caurspīdīgs 16%) fona izmērs: 60 pikseļi 60 pikseļu fona stāvoklis : 0 0, 30 pikseļi 30 pikseļi}Rezerves fons
Kā profesionāls padoms vienmēr ieteicams pievienot fona krāsu kā rezerves variantu. Tas nāk glābšanai, jo īpaši tad, ja fona attēli netiek ielādēti, vai arī gradienta fons, kuru mēs iestatām izstrādes laikā, neatbalsta dažas vecās pārlūkprogrammas, kurās tas tiek skatīts.
Tas nesabojā lietotāja pieredzi, un to var paziņot šādi:
ķermenis {background: url (apple_lost.jpg) rozā}Vairāki foni
Mums ir arī iespēja iestatīt vairākus fona attēlus, un tas ir nepieciešams vairumā gadījumu, piemēram, priekšplānā un fona attēlā. Šeit ir svarīga attēla secība, vispirms tiek deklarēts attēls, kuram jābūt priekšā, un nākamais ir attēls, kuram jābūt aizmugurē pēdējam.
Tālāk ir sniegts vairāku fona attēlu piemērs:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}Atkārtojiet fonu
Rekvizīts fona atkārtojums tiek izmantots kopā ar fona attēlu, lai definētu attēla atkārtotu darbību. Tas norāda, vai un kā tiks atkārtots fona attēls. Fona attēls pēc noklusējuma tiek atkārtots gan vertikāli, gan horizontāli.
Iespējamās vērtības ir:
- atkārtot - attēls atkārtojas gan horizontāli, gan vertikāli
- no-repeat - attēls neatkārtojas
- atkārtot x - attēls tiek atkārtots horizontāli
- atkārtot-y - attēls tiek atkārtots vertikāli
- atstarpe - attēls tiek atkārtots ar vienmērīgām atstarpēm vai atstarpēm starp tām.
- apaļa - attēls tiek atkārtots, lai aizpildītu laukumu bez atstarpēm starp tiem.
Rekvizīta fons-atkārtojums CSS sintakse ir šāda:
fona atkārtojums: atkārtot | atkārtot-x | atkārtot-y | bez atkārtojuma | atstarpe | apaļa
body {background-image: url ('heart.png'), url ('background.png') background-repeat: atkārtot-y, atkārtot-x fona krāsu: #ffffff}Fona pielikums
The fona piestiprināšana rekvizīts tiek izmantots kopā ar fona attēlu, lai norādītu, vai attēlam vajadzētu ritināt, ritinot saturu. Tas nozīmē, ka fona attēls ir jānosaka vai tam jāritina kopā ar dokumentu attiecībā pret pārlūkprogrammas loga skatu. Noklusējuma vērtība ir ritināšana.
Iespējamās vērtības ir:
- ritināt - attēls ritinās līdzās lapai.
- fiksēts - attēls netiks ritināts kopā ar lapu
Fona pielikuma CSS sintakse ir šāda:
kā izmantot skeneri Java
fona pielikums: ritināt | fiksēts
ķermenis {background-image: url ('heart.png'), url ('background.png') background-repeat: atstarpe, apaļa}Fona pozīcija
The background-position rekvizīts tiek izmantots, lai apzīmētu fona attēla atrašanās vietu vai pozicionēšanu. Iespējamās vērtības ir:
- tops
- pa labi
- apakšā
- pa kreisi
- centrā
- šo vērtību kombinācija (piem., kreisā augšdaļa)
CSS sintakse fona pozīcijai ir šāda:
fona stāvoklis: augšā | pa labi | pa kreisi | apakšā | centrā
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: ritiniet}Fona attēls CSS izmērā
Šis rekvizīts ir viens no visnoderīgākajiem, jo tas ļauj mums kontrolēt fona attēla lielumu. Ir dažādas kombinācijas, kuras mēs varam izmantot ar šo īpašību un attiecīgi iegūt rezultātus. Noklusējuma vērtība ir auto.
Ar fona lielumu var izmantot šādas vērtības:
- auto
- attēla garums - augstums un platums, piem. 20 pikseļi 40 pikseļi.
- % - attēla augstums un platums kā% w.r.t vecāka elementa piem. 50% 50%.
- centrs - pielīdziniet attēlu centram
- vāku, mērogojot attēlu, lai tas pilnībā noklātos pēc fona apgabala.
- satur, mērogojot attēlu līdz tā faktiskajam augstumam un platumam.
CSS sintakse fona pozīcijai ir šāda:
fona lielums: vērtība
body {background-image: url ('heart.png'), url ('background.png') background-repeat: bez atkārtojuma, atkārtojiet fona izmēru: 400 pikseļi 150 pikseļi, vāks}body {background-image: url ('heart.png'), url ('background.png') background-repeat: bez atkārtojuma, atkārtojiet fona izmēru: satur, 400 pikseļi un 150 pikseļi}Fona krāsa
Tas ir vienkāršākais no visiem CSS rekvizītiem. Tas pieliek vienkrāsainas krāsas lapas fonam. Šī rekvizīta vērtību var norādīt krāsās (piemēram, sarkanā, zilā utt.), Sešstūra vērtībā un RGB vērtībā.
CSS sintakse fona krāsai ir šāda:
fona krāsa: vērtība
rīki, ko izmanto lielo datu analīzē
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Tādējādi tiek pabeigtas visas īpašības, kuras mēs varam izmantot ar fonu. Mēs vienmēr varam izmēģināt dažādas īpašību kombinācijas, kā redzējām mūsu demonstrācijā.
CSS ir būtiska, un tai jāapgūst prasmes katram priekšgala tīmekļa izstrādātājam. Tas palīdz, izstrādājot un veidojot fonu, kā arī izveidot iespaidīgas vietnes un bagātināt lietotāju pieredzi. Vislabāk ir turpināt eksperimentēt un pilnībā izmantot šīs īpašās priekšgala tehnoloģijas priekšrocības, jo tā var darīt brīnumus un dinamiski pārveidot lapu.
Pārbaudiet mūsu kas nāk ar instruktoru vadītu tiešraides apmācību un reālās dzīves projektu pieredzi. Šīs apmācības ļauj jums prasmīgi strādāt ar back-end un front-end tīmekļa tehnoloģijām. Tas ietver apmācību par Web izstrādi, jQuery, Angular, NodeJS, ExpressJS un MongoDB.
Vai mums ir jautājums? Lūdzu, pieminējiet to komentāru sadaļā “Fona attēls CSS” emuārā, un mēs ar jums sazināsimies.