CSS izmantošana fona attēla iestatīšanai

• Aprīlis 30, 2024

Vai jūs kādreiz domājat, kā vietnes pārvalda šos glītos dizainus un attēlus, kas peld aiz teksta? Tas viss tiek darīts, izmantojot burvju kaskādes stila lapas. CSS ļauj ne tikai norādīt attēlu uz jūsu lapas fona, bet arī ļauj pielāgot, kā attēls tiek parādīts - lai jūs iegūtu tikai vajadzīgo izskatu.

Jūsu fona attēla pamatelements ir pietiekami ietilpīgs 'fona attēla' īpašums. Jūs izmantojat šo īpašumu, lai pastāstītu savai vietnei, kurā atrodas attēla fails, šādi:

ķermeņa {
fona attēls: url ("image.gif");
}

Tas ir viss, kas jums jādara, lai jūsu tīmekļa lapai ievietotu fona attēlu. Protams, jūs, iespējams, vēlēsities pielāgot attēla izskatu. Pieņemsim, ka vēlaties, lai jūsu attēls sāktu lapas augšdaļā, bet būtu centrēts horizontāli, nevis izlīdzinātu pa kreisi (noklusējuma izlīdzināšana). Tādā gadījumā jūs CSS noteikumam vēlēsities pievienot īpašumu “background-position”:

ķermeņa {
fona attēls: url ("image.gif");
fona stāvoklis: centra augšdaļa;
}

Nosakot īpašību 'fona pozīcija', pirmā vērtība nosaka horizontālo izlīdzinājumu (pa kreisi, centrā vai pa labi), bet otrā - attēla vertikālo izlīdzinājumu (augšpusē, centrā vai apakšā).

Pēc tam jūs nolemjat, ka vēlaties apturēt attēla flīzēšanu (atkārtošanos) horizontāli, kaut arī vēlaties, lai tas vertikāli tiktu flīzēts. Ir pienācis laiks izcelt īpašumu “atkārtot fonu”:

ķermeņa {
fona attēls: url ("image.gif");
fona stāvoklis: centra augšdaļa;
fons-atkārtot: atkārtot-y;
}

Iestatot vērtību “atkārtot-y”, pārlūkprogrammai tiek parādīts fona attēla flīzēšana gar y asi, saukts arī vertikāli, bet nevis x ass (horizontāli), kas ir tieši tas, ko mēs vēlējāmies. Ja vēlaties to flīzēt horizontāli, bet ne vertikāli, tā vietā izmantojat vērtību “atkārtot x”; ja jūs nemaz nevēlējāties, lai attēls tiktu flīzēts, piešķiriet tam vērtību “neatkārtot”. Noklusējuma vērtība ir attēla flīzēšana gan horizontāli, gan vertikāli, tāpēc, ja tā ir jūsu attēla labākā izvēle, jums vispār nav jāiestata īpašums “atkārtot fonu”.

Visbeidzot, jūs varat apskatīt īpašumu “fona pielikums”. Pēc noklusējuma attēls ritinās, ritinot lapai, tāpēc, ja attēlu neatkārtojat vertikāli un jums ir gara lapa, attēls netiks pagarināts līdz lapas apakšai. To var mainīt, iestatot rekvizītu 'fona pielikums' uz 'fiksēts', kas izraisa fona attēla palikšanu tajā pašā monitora vietā neatkarīgi no tā, kā lapa ritina. Tagad jūsu fona attēla noteikumi izskatīsies šādi:

ķermeņa {
fona attēls: url ("image.gif");
fona stāvoklis: centra augšdaļa;
fons-atkārtot: atkārtot-y;
piestiprinājums fonam: fiksēts;
}


Ja vēlaties saglabāt savus CSS noteikumus pēc iespējas mazākus, varat apvienot visas savas fona vērtības vienā rindā, izmantojot 'fona' rekvizītu, piemēram:

fona {
url ("image.gif") atkārtot-y fiksēts centra augšdaļa;
}

Izmantojot īpašību “fons”, vērtības ir jāuzskaita noteiktā secībā:
[fona krāsa (ja tiek izmantota)] [fona attēls] [fona atkārtošana] [fona pielikums] [fona pozīcija]. Jūs varat atstāt jebkādu vērtību, kas jums nav nepieciešama, jums vienkārši jāuzskaita visas vērtības, kuras jūs izmantojat pareizā secībā, pretējā gadījumā kārtula nedarbosies.

Video Instrukcijas: Exploring JavaScript and the Web Audio API by Sam Green and Hugh Zabriskie (Aprīlis 2024).