CSS yra „Cascading Style Sheets“ santrumpa. Tai paprasta, bet galinga dizaino kalba, galinti transformuoti tinklalapius. Paprasčiau tariant, tai supaprastina interneto puslapių pateikimo ir patrauklumo vartotojams procesą . Šiame straipsnyje mes suprasime, kaip įdiegti įvairius fono paveikslėlius CSS tokia tvarka:
- Fono paveikslėlis CSS ypatybėse
- Fono paveikslėlis CSS
- Pakartokite foną
- Fono priedas
- Fono padėtis
- Fono paveikslėlis CSS dydžiu
- Fono spalva
Fono paveikslėlis CSS ypatybėse
Yra daugybė savybių, kurios naudojamos vaizdo elgesiui ir padėčiai valdyti. Šios savybės yra:
- fonas-vaizdas
- fonas pakartoti
- prisirišimas prie fono
- fonas-padėtis
- fono dydis
- fono spalva
Susipažinsime su kiekviena iš šių savybių ir pamatysime, kada ir kaip jas panaudoti įdomioje demonstracijoje.
Fono paveikslėlis CSS
fonas-vaizdas ypatybė, kaip rodo pavadinimas, paprasčiausiai naudojama foniniam vaizdui nurodyti ir nustatyti naudojant tinklalapio elementą. Pagal numatytuosius nustatymus fono paveikslėlis dedamas viršutiniame kairiajame elemento kampe.
sintaksė: fono paveikslėlis: url | none | linear-gradient | radial-gradient
body {background-image: url ('apple.jpg')}fonas naudojant URL
Supraskime parametrus:
- URL: Šio parametro įvestis leidžia mums nurodyti bet kurio vaizdo failo kelią arba vaizdo URL, kurį reikia nustatyti kaip foną. Norint deklaruoti daugiau nei vieną vaizdą, URL yra atskirtos kablelio ribotuvu.
body {background-image: url ('apple.jpg')} 
- nė vienas: Tai yra numatytoji ypatybės vertė, o fono vaizdas nėra pateikiamas, jei nurodyta jo vertė.
body {background: none}- tiesinis gradientas (): Foninis vaizdas nustatomas tiesiniu gradientu. Šiai savybei, ty viršuje į apačią, reikia nurodyti mažiausiai dvi spalvas.
turinys {background-color: # 001 background-image: tiesinis gradientas (baltas 15%, skaidrus 16%), linijinis gradientas (baltas 15%, skaidrus 16%) fono dydis: 60 taškų 60 taškų fono padėtis: 0 0, 30 piks. 30 piks.}- radialinis gradientas (): Foninis vaizdas nustatomas kaip radialinis gradientas. Šiai savybei, ty centrui iki kraštų, reikia nurodyti mažiausiai dvi spalvas.
turinys {background-color: # 001 background-image: radialinis gradientas (baltas 15%, skaidrus 16%), radialinis gradientas (baltas 15%, skaidrus 16%) fono dydis: 60px60px fono padėtis: 0 0, 30 piks. 30 piks.}- pasikartojantis tiesinis gradientas (): Jis pakartoja tiesinį gradientą. Panaudokime tą patį pavyzdį, kurį matėme aukščiau tiesiniame gradiente pasikartojančiam tiesiniam gradientui, ir pažiūrėkime skirtumą.
body {background-color: # 001 background-image: besikartojantis tiesinis gradientas (baltas 15%, skaidrus 16%), pasikartojantis linijinis gradientas (baltas 15%, skaidrus 16%) fono dydis: 60 taškų 60 taškų fono padėtis : 0 0, 30 piks. 30 piks.}- pasikartojantis radialinis gradientas (): Jis pakartoja radialinį gradientą. Panagrinėkime tą patį pavyzdį, kurį naudojome aukščiau, radialiniu gradientu.
body {background-color: # 001 background-image: besikartojantis radialinis gradientas (baltas 15%, skaidrus 16%), pasikartojantis radialinis gradientas (baltas 15%, skaidrus 16%) fono dydis: 60 taškų 60 taškų fono padėtis : 0 0, 30 piks. 30 piks.}Atsarginis fonas
Visada patartina kaip profesionalų patarimą pridėti fono spalvą kaip atsarginę parinktį. Tai gelbsti ypač tada, kai neįkraunami fono vaizdai arba kai nustatome gradiento foną, kurį kuriame, kai kurie iš jų yra peržiūrimi, nepalaiko kuriant.
Tai nesugadina vartotojo patirties ir gali būti paskelbta taip:
body {background: url (apple_lost.jpg) rožinė}Keli fonai
Mes taip pat turime galimybę nustatyti kelis fono paveikslėlius, ir tai daugeliu atvejų reikalinga, pvz., Priekinis ir foninis vaizdas. Čia svarbu vaizdo tvarka, pirmiausia nurodomas vaizdas, kuris turėtų būti priekyje, o kitas - paskutinis gale.
Toliau pateikiamas kelių fono paveikslėlių pavyzdys:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}nuotolinio metodo iškvietimas java
Pakartokite foną
Ypatybė „fonas pakartoti“ naudojama kartu su fono vaizdu, kad apibrėžtų vaizdo pakartojimo elgseną. Jame nurodoma, ar ir kaip bus kartojamas fono paveikslėlis. Pagal numatytuosius nustatymus fono vaizdas kartojamas tiek vertikaliai, tiek horizontaliai.
Galimos vertės yra šios:
- pakartoti - vaizdas kartojasi tiek horizontaliai, tiek vertikaliai
- no-pakartoti - vaizdas nesikartoja
- pakartoti x - vaizdas kartojamas horizontaliai
- pakartoti-y - vaizdas kartojamas vertikaliai
- tarpas- Vaizdas kartojamas tolygiais tarpais arba tarpais.
- apvalus - vaizdas kartojamas, kad užpildytų plotą be jokių tarpų.
Ypatybės fonas pakartoti CSS sintaksė yra:
fonas pakartoti: pakartoti | pakartoti-x | pakartoti-y | nekartoti | tarpo | apvalus
body {background-image: url ('heart.png'), url ('background.png') background-repeat: pakartoti-y, pakartoti-x fono-spalva: #ffffff}Fono priedas
prisirišimas prie fono ypatybė naudojama kartu su fono vaizdu, norint nurodyti, ar vaizdas turi slinkti slinkdamas turinį. Tai reiškia, kad fono paveikslėlis turėtų būti pataisytas arba turėtų slinkti kartu su dokumentu, palyginti su naršyklės lango rodiniu. Numatytoji vertė yra slinkti.
Galimos vertės yra šios:
- slinkti - vaizdas slenka kartu su puslapiu.
- fiksuota - vaizdas nebus slenkamas kartu su puslapiu
Fono priedo CSS sintaksė yra:
fono priedas: slinkti | fiksuota
body {background-image: url ('heart.png'), url ('background.png') background-repeat: tarpas, apvalus}Fono padėtis
fonas-padėtis ypatybė naudojama fono paveikslėlio vietai arba padėčiai žymėti. Galimos vertės yra šios:
- viršuje
- teisingai
- dugnas
- paliko
- centre
- šių verčių derinys (pvz., kairysis viršuje)
Fono padėties CSS sintaksė yra:
fono padėtis: viršuje | dešinėje | kairėje | apačioje | centre
body {background-image: url ('heart.png') background-repeat: no-pakartoti background-attachment: slinkti}Fono paveikslėlis CSS dydžiu
Ši savybė yra viena naudingiausių, nes ji leidžia mums kontroliuoti fono paveikslėlio dydį. Yra įvairių derinių, kuriuos galime pritaikyti naudodami šią savybę ir atitinkamai gauti rezultatus. Numatytoji vertė yra automatinė.
Su fono dydžiu galima naudoti šias reikšmes:
- automatinis
- atvaizdo ilgis- aukštis ir plotis, pvz. 20 taškų 40 taškų.
- procentas- vaizdo aukštis ir plotis kaip pirminio elemento w.r.t procentas, pvz. 50% 50%.
- centras - sulygiuokite vaizdą su centru
- uždenkite vaizdą, kad jis būtų visiškai uždengtas fono sritimi.
- vaizdą, kad jis atitiktų jo faktinį aukštį ir plotį.
Fono padėties CSS sintaksė yra:
fono dydis: vertė
body {background-image: url ('heart.png'), url ('background.png') background-repeat: ne-pakartoti, pakartoti fono dydį: 400 taškų 150 taškų, viršelis}body {background-image: url ('heart.png'), url ('background.png') background-repeat: ne-pakartoti, pakartoti fono dydį: yra, 400 piks. 150 piks.}Fono spalva
Tai yra paprasčiausia iš visų CSS ypatybių. Taikomos vientisos spalvos puslapio fone. Šios savybės vertę galima nurodyti spalvomis (pvz., Raudona, mėlyna ir kt.), Šešiakampe ir RGB verte.
Fono spalvos CSS sintaksė yra:
fono spalva: vertė
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Tai užbaigia visas savybes, kurias galime naudoti fone. Mes visada galime išbandyti įvairias savybių kombinacijas, kaip matėme savo demonstracijoje.
CSS yra būtinas dalykas, todėl jis turi įgyti įgūdžių kiekvienam žiniatinklio kūrėjui. Tai padeda kuriant ir formuojant foną, kuriant įspūdingas svetaines ir praturtinant vartotojo patirtį. Geriausia yra toliau eksperimentuoti ir visapusiškai pasinaudoti šia specialia „front-end“ technologija, nes ji gali padaryti stebuklus ir dinamiškai transformuoti puslapį.
Patikrinkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai leidžia išmokti dirbti su išorinėmis ir išorinėmis interneto technologijomis. Tai apima mokymus apie žiniatinklio plėtrą, „jQuery“, „Angular“, „NodeJS“, „ExpressJS“ ir „MongoDB“.
Turite mums klausimą? Prašau tai paminėti tinklaraščio „Fono paveikslėlis CSS“ komentarų skyriuje ir mes su jumis susisieksime.