Fiksēti, ritināmi fona attēli. Fiksēti, ritināmi fona attēli Attēls kā lapas fons — CSS
24.08.2023
Uzstādot fiksētu fona attēlu zem galda, kurā mums būs teksts un citi noderīga informācija, tiek izveidots šāds efekts: ritinot tabulu ar tekstu, fons zem tā paliek nekustīgs un nepārvietojas kopā ar tabulu. Tāpat kā šeit:
Šis efekts var radīt ilūziju par divslāņu, kādu vietu jūsu lapās. Parasti nekustīga attēla fona efektu panāk, CSS stila lapai iestatot šādus atribūtus: background-attachment:fix; Mēs runājam par CSS stila lapu, kas jums ir atsevišķā dokumentā ar paplašinājumu .css
Ir vairāki veidi, kā instalēt to, kas mums nepieciešams.
1. metode.
Mēs izvēlamies attēlu, kas būs mūsu fons. Šajā gadījumā es uzņemu šo attēlu (noklikšķiniet uz sīktēla, lai redzētu pilnu izmēru):
Lai dokumentētu css stili, kur mēs iestatām BODY parametrus, ievietojiet šādu konstrukciju:
Šajā gadījumā mēs ņemam par fona attēlu liels attēls pilnekrāna režīmā (piemēram, 1280 x 1024 pikseļi).
Piezīme:Ja jums nav css stila dokumenta, jums tas ir jāizveido, kā norādīts - un jāpievieno saite uz css stila dokumentu savas html lapas kodā, kā norādīts tajā pašā nodarbībā.
Tātad, šeit ir parametri, kurus mēs iestatām, izmantojot stilus:
Es izveidoju vienkāršs galds uz 70% ekrāna un skaidrības labad ievietojiet tajā tekstu un divus attēlus. Tas ir tas, ko mēs ieguvām lapā: (lai redzētu stacionāra fona efektu, ritiniet lapu uz augšu un uz leju).
2. metode.
Mēģināsim ielikt mazu bildīti, kas automātiski atkārtosies un aizpildīs visu lapas vietu, veidojot fona rakstu. Lūk, attēls:
Tajā pašā laikā mēs labojam visu fonu, ierakstot šādu konstrukciju CSS stila lapā:
Šeit mēs iestatām tikai parametru: background-attachment:fix; - tas ir, viņi noteica pārlūkprogrammai norādījumu padarīt fona attēlu nekustīgu. Tā kā mēs neteicām attēlam “nevairot”, tam vajadzētu vairoties visā ekrānā.
3. metode.
Mēģināsim vienā pusē uzstādīt fona attēlu, bet lapas pretējā pusē novietot tabulu ar tekstu un attēliem, lai tas neaizsedz fona attēlu. Lai to izdarītu, CSS dokumentā ierakstiet:
BODY (fons:#e0ddd8 url(fona attēla adrese) bez atkārtošanas, fiksēts augšā pa kreisi)
Background:#e0ddd8 url (fona attēla adrese) — krāsa zem fona attēla ir bēša, kas atbilst paša attēla fona krāsai. Tas tiek darīts tā, lai mūsu attēla pāreja uz fonu nebūtu redzama (attēls aizņem tikai daļu no ekrāna).
No-repeat - bilde nevairojas (ir viena liela bilde ar vienu no maniem mīļākajiem amerikāņu aktieriem - Robertu Duvālu).
Fiksēts - fons ir fiksēts, tas ir, nekustīgs.
Kreisais augšējais - izlīdzināts ar ekrāna augšējo kreiso malu (attēlu varat ievietot labajā pusē, bet vietnes tabulu - pa kreisi, kā vēlaties. Lai to izdarītu, html dokumentā tabulā ierakstīsiet:
Trepačovs D.P. 2012-2020
Studentiem: man ir atvaļinājums līdz 6.janvārim, atvaļinājuma laikā atbildēšu iespēju robežās, dažreiz es varu pazust uz pāris dienām
Izkārtojums JavaScript PHP NodeJs Vue React Laravel WordPress AJAX parsēšana Pamata apmācība HTML atsauce CSS atsauce OOP un MVC apmācība Video pamācības Pamata apmācība Atsauce Video pamācības Pamata apmācība Pamata apmācība Pamata apmācība Administratora apmācība Izstrādātāja apmācība X+ PHP apmācība AJA
fona pielikuma īpašums
Īpašums fona pielikums norāda, kā ritināt elementa fona attēlu: kopā ar tekstu vai teksts slīd virs attēla.
Pēdējā rakstā mēs runājām par to, kā mainīt vietnes fona krāsu, izmantojot tagu atribūtus ķermeni un CSS stili: . Šajā rakstā tiks runāts par attēlu izmantošanu kā fonu vietnē, kā izstiept fonu līdz pilnam lapas platumam un to salabot.
Attēls kā lapas fons — HTML
Vispirms apsvērsim, kā vietnē iestatīt fona attēlu, izmantojot atribūtu fons tagu ķermeni:
Fona attēls, izmantojot HTML
Šeit fona attēls tiek iestatīts, izmantojot ķermeņa taga atribūtu fona.
Tāpat kā iepriekš minētajā piemērā, papildus attēlam ir ieteicams norādīt arī fona krāsu (tā tiks rādīta vietnē, kamēr lapa tiks ielādēta), kas vislabāk atbilst fona attēlam un radīs kontrastu ar tekstu. vietnē. Piemēram, ja savā vietnē izmantojat baltu teksta krāsu, jums ir jānorāda tumša fona krāsa un jāiestata tumšs fona attēls. Šajā gadījumā teksts būs viegli lasāms.
Piezīme: Fona attēlu un fona krāsu ieteicams iestatīt, izmantojot CSS, nevis HTML. Šajā gadījumā kods būs derīgs un pareizāks.
Attēls kā lapas fons — CSS
CSS fona krāsu un fona attēlu var iestatīt vienā rekvizītā fons:
Fona attēls, izmantojot CSS
Šeit fona attēls tiek iestatīts, izmantojot fona CSS rekvizītu.
Šeit izmanto īpašumu fona pielikums lapas fons ir fiksēts, un tiek izmantots rekvizīts fona atkārtojums ir iestatīts attēla horizontālais atkārtojums. Bet ir vērts padomāt, ka fona attēlam jābūt labi “izšūtam” ap malām.
Ja vēlaties izstiept fona attēlu līdz pilnam pārlūkprogrammas loga izmēram, izmantojiet rekvizītu fona izmērs: 100%;
Nubex vietņu veidotājā varat izmantot lielu attēlu kā fonu jebkurai vietnei un piespraust to.
Īsa informācija
CSS versijas
Vērtības
fiksēts Padara elementa fona attēlu nekustīgu.
ritināšana Ļauj fonam pārvietoties kopā ar saturu.
mantot Pārmanto vecāku vērtību.
lokāls Fons tiek fiksēts, ņemot vērā elementa uzvedību. Ja elementam ir ritināšana, fons ritinās kopā ar saturu, bet fons ārpus elementa paliks vietā.
Programmā Internet Explorer 6 fiksētā funkcija darbojas tikai tagiem
vai
Internet Explorer versijas līdz 7.0 (ieskaitot) neatbalsta mantojuma vērtību.
Kopš versijas 4.0 Chrome ir atbalstīta vietējā vērtība.
Safari ir atbalstījis vietējo vērtību kopš versijas 5.0.
Firefox nesaprot vietējā nozīme.
Gandrīz katrai populārai vietnei ir jauks izskats. Svarīga mājas lapas dizaina sastāvdaļa ir fons, saukts arī par fonu, ko katrs no mums var izveidot vai mainīt. Šajā rakstā es jums pastāstīšu, kā vietnē ievietot fonu.
Jauna fona izveide vietnēm
Lai pabeigtu uzdevumu, varat izmantot vienu no 4 metodēm:
1. Fons ar vienu krāsu
2. Fons ar tekstūru
3. Fons, izmantojot gradientu 4. Fons no liela attēla Izveidojiet fonu, izmantojot vienu krāsu
Lai izveidotu vai mainītu vietnes fonu, kas sastāv no vienas krāsas, jums jādodas uz failu
stils.css
, kurā atrodiet vērtību - ķermeni (tas ir atbildīgs par vietnes galveno daļu). Tagad jums ir jāreģistrē fona krāsas funkcija, ja tā neeksistēja, un jānorāda krāsas kods. Gadījumā, ja vietnei ir jāizveido balts fons, jums būs jāieraksta šāds kods:
fona krāsa: #83C5E9 ; (zils fons, kā piemērā)
Pilnu krāsu sarakstu varat atrast mājaslapā - (STM). Lai mainītu krāsu, vienkārši mainiet vērtību aiz resnās zarnas un izbaudiet savus centienus.
Fona izveide, izmantojot tekstūru
Šajā kodā ir pazīstams parametrs krāsas saglabāšanai (tā ir zaļa) un elements, kas ir atbildīgs par zaļās tekstūras savienošanu.
Fona veidošana, izmantojot gradientu
Jebkuru attēlu, kas ir savienots, izmantojot css funkcijas, var atkārtot gan horizontāli, gan vertikāli (gar asīm X Un Y). Šī iespēja ļauj mums ar savām rokām izveidot jebkuru vienkāršu vietnes fonu. Lai to izdarītu, jums ir jāizveido gradients 1 megapikseļa platumā (skatiet attēlu zemāk), saglabājiet to kā attēlu un augšupielādējiet to savā mitināšanā. Pēc tam varat uzrakstīt nepieciešamo kodu, proti:
fona krāsa: #83C5E9;
fona attēls: url(attēli/gradients.jpg);
fona atkārtojums: atkārtojiet-x;
Šajā komplektā prioritārā secībā ir par fona krāsu atbildīgā funkcija, kuru izmantojam pārapdrošināšanai. Pēc tam parametrs, kas ir atbildīgs par gradienta savienošanu, un, visbeidzot, funkcija, kas ir atbildīga par gradienta atkārtošanu gar X asi.
Liela attēla izmantošana vietnes fonam
Šī metode ir otrā populārākā, jo tā ļauj izmantot dažādus attēlus fona veidošanai. Lai ieviestu šo metodi, vietnes attēlu mapē ir jāaugšupielādē tikai liels attēls un jāievada šāds kods:
fona krāsa: #000000;
fona attēls: url(attēli/attēla nosaukums.jpg);
fona pozīcija: augšdaļa centrā;
fona atkārtojums: neatkārtot;
Ja ar pirmajiem diviem parametriem viss ir skaidrs, tad pēdējie divi ir jānosedz. Trešā funkcija ļauj fiksēt attēlu vietnes centrā, un pēdējais parametrs bloķē tā atkārtošanos visā lapas struktūrā.
Fona maiņa ucoz vietnēs
Šīs vietnes fona izveides metodes var izmantot dažādās satura pārvaldības sistēmās, bet ne vietnēs - ucoz. Lai mainītu ucoz vietnes fonu, jums jāiet uz vietnes vadības paneli, dodieties uz "Dizaina vadība", un tad iekšā "Veidņu rediģēšana".
Tagad jums ir jāatver stila lapa (CSS), jāatrod līnija "ķermenis" un parametrs "fons". Pēc tam jums ir jānokopē saite, jāielīmē tā savā interneta pārlūkprogrammā, un jūs varēsit piekļūt attēlam, kas bija fons.
Lai izmantotu jaunu fonu, tas vienkārši jāaugšupielādē failu pārvaldniekā. Vienlaikus pārliecinieties, vai jaunā fona attēla nosaukums ir tāds pats kā pirms izmaiņu veikšanas. Saglabājiet savu darbu un dodieties uz vietni, lai skatītu paveikto.
Vietnes fona maiņa uz HTML
Ja vēlaties izveidot fonu html vietnei, izmantojot attēlu, vienkārši ievadiet rindiņu kodā:
Un, ja vēlaties vietnes fonu izveidot, izmantojot krāsu, līnijai vajadzētu izskatīties šādi:
Tas noslēdz mūsu stāstu. Tagad jūs zināt, kā izveidot vietnes fonu. Laimīgus projektus!
