Domāju, ka nav nevienas vietas, kur īpašums netiktu izmantots CSS fons. Šķiet, kas var būt vienkāršāks par šo īpašumu? Bet nē, tā iespējas ir daudz plašākas nekā parastā attēla vai krāsas piešķiršana lapas fonam. Daži būs pazīstami, un daži, iespējams, daudziem būs jauni. Jebkurā gadījumā būs noderīgi rūpīgi zināt, kā darbojas fons.
CSS3 ienesa īpašumā daudz jaunu lietu, piemēram, caurspīdīgumu un vairāku attēlu piešķiršanu kā fonu, taču par to mēs runāsim tālāk, bet vispirms apskatīsim īpašuma pamatus. fons.
fona krāsa
Esmu vairāk nekā pārliecināts, ka esat jau vairāk nekā vienu reizi piešķīris fona krāsu. To var izdarīt, izmantojot vairāku veidu apzīmējumus: parasto (tiek izmantots krāsas nosaukums), heksadecimālo vai RGB apzīmējumu. Katrs veids ir līdzvērtīgs, izmantojiet to, kas jums patīk vislabāk. Es cenšos izmantot īsāko iespēju, un, lai vieglāk uztvertu, iegūtais stila fails ir nedaudz mazāks.
P (fona krāsa: sarkana;) p (fona krāsa: #f00;) p (fona krāsa: #ff0000;) p (fona krāsa: rgb(255, 0, 0;))
CSS3 atbalsta caurspīdīgumu, tāpēc mēs varam to pievienot savai krāsai, piemēram, šādi:
P (fona krāsa: rgba (255, 0, 0, 0,5);)
Pēdējais skaitlis nosaka caurspīdīgumu līdz 50%. Varat iestatīt caurspīdīguma vērtību no 0 (pilnīgi caurspīdīgs fons) līdz 1 (pilnīgi necaurspīdīgs).
fona attēls
Šis īpašums tiek izmantots arī ļoti bieži, tas ļauj fonam piešķirt attēlu. CSS3 ir pievienojis iespēju fonam piešķirt vairākus attēlus, katrs veidojot savu slāni, tāpēc katrs nākamais pārklājas ar iepriekšējo. Kāpēc tas varētu būt noderīgi? Viss ir pavisam vienkārši - pieņemsim, ka katrā vietnes stūrī ir jāieskrūvē mazi volāni. Ņemot vērā vairāk vai mazāk gumijas izkārtojumu, viena attēla izmantošana nav iespējama. Tāpēc mēs izveidojam 4 "slāņus", pārvietojam katru attēlu uz savu stūri un viss, problēma ir atrisināta
Pamatteksts (fona attēls: url("attēls1"), url("attēls2"), url("attēls3"))
Ja jums ir jāpiešķir viens attēls fonam, mēs kodā atstājam tikai pirmo, es domāju, ka tas ir saprotams.
Izmantojot jebkuru attēlu kā fonu, jums jāatceras divi noteikumi:
- iestatiet kontrastējošu fona krāsu gadījumam, ja lietotājs kādu iemeslu dēļ attēlu neredz. Tas var vienkārši izslēgt attēlu displeju, ietaupot satiksmi.
- Neizmantojiet fona attēlu, lai sniegtu svarīgu informāciju. Iepriekš minēto iemeslu dēļ lietotājs to var neredzēt.
Atbalsts vairākiem fona attēliem ir diezgan plašs. Visas pārlūkprogrammas, pat IE8, atbalsta šo īpašumu.
Un šeit mēs nonākam pie galvenā, pārfrāzēsim: "Vietne sākas ar fonu." Lielākā daļa emuāru autoru veido "klasiskos emuārus" uz balta fona, taču mēs iesim citu ceļu. Brauciet garām brīnišķīgam īpašumam CSS fona attēls, mēs nevaram.
Ko tas dara? Šis īpašums CSS fona attēls ievieto attēlu kā fonu dažādos elementos HTML- lapas. Tas neaprobežojas tikai ar tagu ķermeni, un to plaši izmanto vietņu dizainā, piemēram: div, li, p, tabula, galvene, kājene.
Apskatīsim piemēru:
Vietnes dizains sākas ar fonu.
Pareizi būtu norādīt fona krāsu – rekvizītu fona krāsa, kā drošības tīkls, ja attēls netiek ielādēts. Iekavās url() norādiet ceļu uz mapi ar attēliem.
Pēc noklusējuma attēls atkārtosies kā “flīzējums”, līdz tas aizpildīs visu pārlūkprogrammas ekrānu, kamēr mēs virzāmies uz leju, mūsu “mozaīks” aizpildīs gan otro, gan trešo ekrānu, līdz lapas saturs beigsies. . Skaidrs, ka šāds rezultāts nav dizaina domu augstums, un mums nebūs “vannas istaba”, bet tikai blogs, kur lasāmība ir ļoti svarīgs punkts.
Vienkāršs risinājums, lai atbrīvotos no “flīzēšanas”, ir izmantot lielu attēlu, vismaz 1024 pikseļu platumā, lai tas aizpildītu visu ekrānu. Labs risinājums būtu arī viengabalainas faktūras atrašana, pavairojot raksts izskatīsies kā viens vesels.
Kā padarīt fonu pievilcīgāku?
Paldies Dievam, mums ir palīgi šim nolūkam:
- nē-atkārtoties– atspējot atkārtošanu
- atkārtojiet-x– modeļa atkārtošana tikai horizontāli
- atkārtojiet-y– raksta atkārtošana tikai vertikāli
Piemēram:
Emuāra galvene
Šī ir fona tekstūra, kas atkārtojas tikai horizontāli.
Nākamais palīgs – īpašums fona pozīcija, ļauj novietot fona attēlu jebkurā ekrāna vietā. Šis paņēmiens ir plaši izplatīts mūsdienu tīmekļa dizainā. Mums ir bilde, bet tā nav daļa no satura, bet kalpo tikai kā vietnes dekorācija.
Virsraksts
Neatkārtota fona piemērs ar noteiktu pozicionēšanu.
Attēls tiek parādīts tikai vienu reizi un atrodas labajā pusē.
Atkāpe no labās malas ir iestatīta uz 200 pikseļiem, lai izvairītos no teksta sadursmes ar fonu.
Ja vēlamies, lai attēls vienmēr būtu redzams, ritinot ekrānu uz leju, iepriekš norādītajam kodam jāpievieno rekvizīts - fona pielikums: fiksēts;
Kāda ir atšķirība starp img Un fona attēls?
Atšķirība ir būtiska, tag img ievietots tieši ķermenī HTML-lapa un atbild par saturu (ilustrācijas, fotogrāfijas, iemiesojumi), nes semantisko slodzi. Ir ļoti svarīgi, lai meklētājprogrammas indeksētu attēlu un iekļautu meklēšanas rezultātos. Īpašības CSS fona attēls– padariet vietni unikālu un skaistu, tas ir, tas ir dizains, kas jāpārnes uz ārēju failu CSS stilus vai izmantot elementā stils.
Protams, tas to nenozīmē fona attēls nedarbosies, ja ievietos ķermenī HTML- lapas. Bet es stingri iesaku ņemt vērā visu, kas saistīts ar dizainu CSS. Rezultātā mēs iegūsim tīrību HTML-kods:
- tas pozitīvi ietekmēs vietnes indeksēšanu;
- arī jūsu apmeklētāji būs apmierināti, vietne ielādēsies ātrāk, pateicoties tās vieglajam svaram.
- Jums kā tīmekļa pārzinim ir vieglāk strādāt ar tīru kodu.
Mēs esam apsvēruši vairāk vai mazāk visas iespējas, izmantojot īpašumu CSS fona attēls. Vairāk prakses draugu! Jūtieties brīvi kopēt kodu un izdomājiet savas variācijas!
īsa informācija
CSS versijas
Vērtības
url Vērtība ir ceļš uz grafisko failu, kas norādīts konstrukcijā url(). Ceļu uz failu var rakstīt pēdiņās (dubultās vai vienvietīgās) vai bez tām. nav Atspējo elementa fona attēlu. mantot Pārmanto vecāku vērtību.HTML5 CSS2.1 IE Cr Op Sa Fx
Objekta modelis
document.getElementById("elementID ").style.backgroundImage
Pārlūkprogrammas
Internet Explorer versijās līdz pat versijai 7.0 (ieskaitot) tiek lietots fons tāda elementa iekšējai robežai, kuram ir iestatīts rekvizīts hasLayout. Ja elementam nav hasLayout , fona attēla rekvizīts ievēros elementa robežas, kā norādīts specifikācijā. Displeja atšķirība būs pamanāma, ja apmales ir punktētas vai punktētas, nevis viengabalainas.
Ja elements ir iestatīts uz ritināšanu vai automātisku , pārlūkprogrammai Internet Explorer 8 būs viena pikseļa vertikālā aizkave, kad fons ritinās.
Internet Explorer versijas līdz 7.0 (ieskaitot) neatbalsta mantojuma vērtību.
Ja fons ir iestatīts tabulas rindai (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Šī piemēra rezultāts pārlūkprogrammā Chrome ir parādīts attēlā. 1. Internet Explorer, Opera un Firefox pārlūkprogrammas pareizi parāda līnijas fonu (2. att.).
Rīsi. 1. Atkārtojiet fonu katrai šūnai
Rīsi. 2. Fons visai līnijai
Sveiki, dārgie emuāra vietnes lasītāji. Šodien mēs apskatīsim piecus CSS noteikumus, kas ļauj iestatīt fonu jebkuram HTML elementam - fona pozīcija (attēls, atkārtojums, krāsa, pielikums). Neaizmirsīsim arī pieminēt fona savienojuma noteikumu.
Šeit nav nekā sarežģīta, taču ir dažas smalkumus un nianses, kas jums jāzina par gatavu veidni (atcerieties par to, kas palīdzēs atklāt visas jebkura dizaina smalkumus un mīnusus).
Atgādinu vēlreiz, ka šis raksts ir daļa no sērijas un vislabāk būtu sākt pētīt stila iezīmēšanu no sākuma, proti, ar rakstu par to, kas ir CSS un ar ko tas tiek lietots, un tad sekot norādītajā secībā. uzziņu grāmatā. Lai gan jebkurā gadījumā tas ir atkarīgs no jums, bet tagad parunāsim par fona iestatīšanu.
Krāsa, fona krāsa un fona attēls
Vispirms apskatīsim, kā iestatīt HTML elementu krāsu, izmantojot Css krāsu noteikumi. Patiesībā šeit viss ir vienkārši. Sintakse ir pilnīgi normāla, un jūs varat iestatīt krāsu atbilstoši tam, kā tas tika darīts hiperteksta iezīmēšanas valodā. Kā atceraties, novieto aiz jaucējzīmes (hash - “#fe35a3”) vai izmantojot trīs ciparus, ja pirmais sakrīt ar otrā vērtību, trešais ar ceturto un piektais attiecīgi ar sesto ( krāsu kodu “#aa33ff” var īsi uzrakstīt kā “a3f”).
Arī krāsas Html un Css kodā var attēlot vārdu veidā (piemēram, “sarkans”), bet visbiežāk tiek izmantots heksadecimālais kods:
Krāsa: #303
Piemēram, es iekrāsoju šo mazo rindkopu tādā pašā krāsā kā iepriekš (#303). Tagad tā ir nedaudz atšķirīgāka no visām pārējām rindkopām (tumšāka), kas ir iestatīta uz #555 WordPress motīva CSS failā, kuru izmantoju. Bet krāsas iestatīšana, izmantojot krāsu, ir pavisam vienkārša, bet ar fonu tas būs nedaudz sarežģītāk.
Tātad, fonam Css Ir pieci noteikumi, kurus pēc vēlēšanās var apvienot vienā. Lai tos skatītu, varat doties uz pašreizējo W3C specifikāciju lapu un meklēt jebko ar vārdu Background:
- fona krāsa — izmantojot šo noteikumu, jūs iestatāt jebkura HTML elementa fona krāsu. Varat izmantot vai nu kodu, vai ēnas nosaukumu, t.i. viss ir tieši tāpat, kā tas bija, izmantojot krāsu.
fona attēls - ar to kā fonu var izmantot attēlu (bet noteikti izlasi par to, jo smagas bildes palēninās lapu ielādi), ceļš uz kuru tiks norādīts url () funkcionalitātē.
Ja paskatās uz specifikāciju, jūs to redzēsit noklusējuma fona krāsa jebkurš elements būs caurspīdīgs (noklusējuma kārtulas vērtība ir “background-color:parent”). Tiesa, elementos tas pēc noklusējuma nebūs caurspīdīgs, jo Tie ir sistēmas elementi, un viss tajos atšķiras un atšķiras no parastajiem hiperteksta iezīmēšanas valodas tagiem.
Fona krāsas krāsa ir iestatīta kā standarta (seši vai trīs heksadecimālā koda cipari vai vārds):
Fona krāsa: #FEFCDE
Piemēram, šīs rindkopas fons ir norādīts, izmantojot fona krāsu ar krāsu kodu, kas norādīts tieši iepriekš.
Visi pārējie četri CSS noteikumi attieksies tikai uz fona attēlu, ko var iestatīt jebkuram HTML elementam un, ja vēlaties, precīzi novietot. Kurš grafiskais fails tiks izmantots, var norādīt, izmantojot fona attēls.
Ja skatāties uz iezīmēšanas valodas specifikāciju, jūs redzēsit, ka fona attēla noklusējuma vērtība ir “nav” (t.i., fonam netiek izmantots attēls). Nu, ja jums tas joprojām ir nepieciešams, url () funkcionalitātē jums būs jānorāda ceļš uz to:
Background-image:url(https://site/image/comment_top_focus.gif);
Piemēram, šai rindkopai es izmantoju grafisko failu ar fonu, kura ceļš ir aprakstīts tieši iepriekš. Jūs redzat, ka visa šai rindkopai atvēlētā platība ir pārklāta ar atkārtotu attēlu, kas oriģinālā izskatās šādi:
Tie. izmantojot tikai vienu fona attēla kārtulu, kas norāda ceļu uz grafisko failu, šis pats attēls tiks reizināts gan vertikāli, gan horizontāli, līdz tas aptver visu tīmekļa lapā šim konkrētajam HTML elementam atvēlēto apgabalu (mūsu piemērā tas bija rindkopa). Kāpēc tas notiek?
Fona atkārtošana — atkārtojiet fona attēlu
Jā, jo mēs nenorādījām nekādu vērtību CSS kārtulai fona atkārtojums, kas nozīmē, ka tam tiks izmantota noklusējuma vērtība. Aplūkojot specifikāciju, mēs atklājam, ka šī vērtība atbilst “atkārtot” (atkārtot attēlu uz visām asīm). Atbilde nāca dabiski.
Tāpēc ar fona atkārtošanu mēs varam pārvaldīt fona attēlu atkārtojumus. Šim noteikumam var būt tikai četras nozīmes:
Background-position - fona pozicionēšana
Tagad rodas jautājums: vai ir iespējams pārvietot fona attēlu prom no elementa izmēru ierobežojošā apgabala augšējā kreisā stūra. Protams, jūs varat, un šim nolūkam ir atsevišķs noteikums. fona pozīcija:
Apskatot CSS specifikāciju, kļūst skaidrs, kāpēc fona attēls pēc noklusējuma ir nospiests tieši Html elementa apgabala augšējai kreisajai malai. Tā kā vērtība "0% 0%" ir fona pozīcijas noteikuma noklusējuma vērtība.
Ja šis noteikums elementam nav skaidri iestatīts (kā mūsu gadījumā), pārlūkprogramma atlasa tā vērtību, kas pēc noklusējuma tiek pieņemta specifikācijā (ņemiet vērā, ka koordinātu asis CSS tiek ziņots tieši no augšējās kreisās malas apgabala elementu).
No specifikācijas arī ir skaidrs, ka, lai pozicionētu fona attēlu, izmantojot fona pozīciju, varat izmantot gan relatīvās (procentos), gan absolūtās vērtības (piemēram, ). Nu, jūs varat arī izmantot vārdus, kas atbildīs noteiktām digitālajām vērtībām. Bet vispirms vispirms.
Iestatot fona attēla novietojumu izmantojot absolūtās vienības fona pozīcijā, lai noteiktu tā galīgo pozīciju, tiek izmantots šāds princips:
Tie. pārlūkprogramma aprēķinās norādītās nobīdes gar X un Y asīm no apgabala sākuma, kurā atrodas objekts, līdz paša attēla izcelsmei. Piemēram, šajā rindkopā es izvietoju fona attēlu, izmantojot fona pozīciju, izmantojot šādus CSS noteikumus:
Background-image:url(https://site/image/logo.svg?1); background-repeat:no-repeat; fona pozīcija: 400 pikseļi 25 pikseļi;
Lūdzu, ņemiet vērā, ka šajā gadījumā tas tiks līdzināts skata laukuma centram, nevis šīm rindkopām atvēlētās zonas centram. Ir skaidrs, ka patiesībā šāds fona attēla izvietojums, visticamāk, netiks izmantots.
Tomēr, ja iestatāt fiksētu fona pozīciju tādiem elementiem kā pamatteksts vai HTML (t.i., tagos, kas aptver visu tīmekļa lapu), šis attēls vienmēr būs redzams skata logā, un tieši tas ir CSS fona pielikuma izmantošana. īpašums modernā bloku plānojumā.
Vai ir vēl daži saliekamais likums Fons, kas ļauj apvienot visus piecus iepriekš aprakstītos noteikumus vienā pudelē. Turklāt visu piecu vērtības kombinētajā versijā var izmantot jebkurā secībā un jebkurā daudzumā (tās ir unikālas, un pārlūkprogramma tās nesajauks). Viss, ko nepārprotami nenorādīsiet, pārlūkprogrammā tiks uzskatīts par noklusējuma vērtību.
Png) bez atkārtošanās 50%;
Skaidrības labad šim punktam tiek piemērots saliekamās konstrukcijas noteikuma piemērs. Neiznāca smuki, bet tas nav galvenais. Šajā rindkopā ir izmantots dīvains dzeltena fona aizpildījums, kā arī Liveinternet logotipa attēls, kas līdzināts rindkopas centram. Jo Ja fona pielikuma noteikumam nav piešķirta vērtība, tiek izmantota ritināšanas vērtība (noklusējums).
Ja kādam elementam vēlaties iestatīt tikai krāsu aizpildījumu un neapgrūtināt fona attēlu, varat to izdarīt tā:
Fona krāsa: #FEFCDE
rakstīt:
Fons: #FEFCDE
Tā kā visas pārējās saliekamās kārtulas vērtības tiks ņemtas pēc noklusējuma, un tas ir tas, kas jums bija nepieciešams.
Veiksmi tev! Uz drīzu tikšanos emuāra vietnes lapās
Jūs varētu interesēt
Saraksta stils (tips, attēls, pozīcija) — Css kārtulas sarakstu izskata pielāgošanai HTML kodā Kā konfigurēt tabulu rindu, sarakstu un citu HTML elementu mainīgo fona krāsu vietnē, izmantojot n-to bērnu pseidoklasi 
Pozīcija (absolūtā, relatīvā un fiksētā) - veidi, kā pozicionēt Html elementus CSS (noteikumi pa kreisi, pa labi, augšā un apakšā) 
Peldēt un notīrīt CSS — bloku izkārtojuma rīki 
Pozicionēšana, izmantojot Z-indeksu un CSS kursora kārtulu, lai mainītu peles kursoru 
Polsterējums, piemale un apmale - iestatiet iekšējo un ārējo polsterējumu CSS, kā arī apmales visām pusēm (augšpusē, apakšā, pa kreisi, pa labi) 
Rādīt (bloķēt, nav, iekļauts) CSS — iestatiet HTML elementu parādīšanas veidu tīmekļa lapā 
Css prioritātes un to palielināšana, pateicoties Svarīgi, atlasītāju kombinācija un grupēšana, lietotāju un autoru stili 
CSS - kas tas ir, kā kaskādes stila lapas tiek savienotas ar HTML kodu, izmantojot stilu un saiti 
Tagu, klases, Id un universālie atlasītāji, kā arī atribūtu atlasītāji mūsdienu CSS
