Fona attēla iestatīšana elementam

Ievads

Krāsains elements ar ikonu ir skaidrs un kompakts; elements ar fotoattēlu ir aicinošs. Smart Tiles ļauj jebkuram elementam vienlaidu krāsas vietā būt fona attēlam — biroja fotoattēls elementam Apmeklējiet mūs, produkta attēls jaunumu lapai, komandas fotoattēls nodaļas vietnei. Šajā rakstā paskaidrots, kā iestatīt attēlu, kā tas tiek rādīts un kā saglabāt elementu salasāmu.

Attēla iestatīšana

1. Atveriet lapu rediģēšanas režīmā un noklikšķiniet uz elementa pogas ….
2. Norādiet uz Fona krāsa un izvēlieties Fona attēls — apakšizvēlnes pirmo vienumu.
3. Dialogā Attēls ierakstiet vai ielīmējiet attēla adresi laukā Attēla URL vai pārlūkojiet vietnes bibliotēkas un noklikšķiniet uz attēla.
4. Noklikšķiniet uz Lietot.

Dialogs Attēls ir tas pats, ko izmanto pielāgotiem ikonu attēliem: lauks Attēla URL pieņem adresi, kas sākas ar https://, vai ceļu, kas sākas ar /, bet saraksts zem tā ļauj pārlūkot pašreizējās vietnes dokumentu bibliotēkas mapi pēc mapes, rādot attēlus kā sīktēlus. Dialogs ir sīki aprakstīts rakstā KB10244. Pielāgota attēla izmantošana par elementa ikonu.

Kā attēls tiek rādīts

Attēls aizpilda visu elementu: tas tiek mērogots tā, lai pilnībā nosegtu elementu, un centrēts, bet tas, kas neietilpst, tiek apgriezts pie malām. Elements saglabā savas proporcijas — tā platumu nosaka elementa Lielums, bet augstumu — saturs un Iekšējais ievilkums —, tāpēc viens un tas pats attēls elementā «Mazs» un elementā «Pilns platums» tiek apgriezts atšķirīgi.

Ikona, virsraksts un apraksts tiek zīmēti virs attēla elementa krāsā Fonta krāsa.

Krāsa zem attēla

Elementa fona krāsa, iestatot attēlu, nepazūd: tā tiek zīmēta zem attēla un ir redzama, kamēr attēls ielādējas, caur PNG caurspīdīgajām zonām un tad, ja attēlu vispār nevar ielādēt. Izvēlieties krāsu, kas ir tuva attēla kopējam tonim, lai elements, kas vēl ielādējas, neiemirdzētos citā krāsā.

Teksta salasāmības saglabāšana

Teksts uz fotoattēla ir tik salasāms, cik liels ir kontrasts starp tiem. Palīdz daži ieradumi:

• izvēlieties attēlus ar mierīgu zonu — debesis, siena, ūdens —, kur atradīsies virsraksts, vai apgrieziet attēlu tā, lai šāda zona būtu centrā;
• izmantojiet baltu tekstu uz tumšiem attēliem un melnu tekstu uz gaišiem un attiecīgi iestatiet Fonta krāsa;
• iespējojiet Ēna tīmekļa daļas iestatījumos: krītošā ēna zem ikonas atdala to no raiba fona;
• apsveriet virsraksta paslēpšanu attēlu elementiem, kas runā paši par sevi, un ierakstiet nosaukumu laukā Apraksts, lai tas joprojām parādītos rīka padomā.

YouTube sīktēls

Kad elementa saite ved uz YouTube video, izvēlnē Fona krāsa virs vienuma Fona attēls parādās vēl viens vienums: Sīktēls. Tas kā fonu izmanto video priekšskatījuma attēlu, neglabājot elementā attēla adresi. Publicētajā lapā sīktēla elements rāda tikai atskaņošanas pogu; tā virsraksts un apraksts paliek rīka padomā.

Prasības attēlam

• Adresei jāizmanto https:// vai jābūt ceļam pašreizējā nomniekā; apmeklētājiem ir jābūt lasīšanas piekļuvei attēlam.
• Saglabājiet failu saprātīgi mazu — fotoattēls ar 1200 pikseļiem garākajā malā, saglabāts kā JPEG vai WebP, ir pietiekams elementam «Pilns platums» un ātri ielādējas katrā lapā, kurā panelis tiek izmantots.
• Attēliem ar caurspīdīgu fonu caur caurspīdīgajām zonām ir redzama elementa krāsa, ko var izmantot ūdenszīmes stila dizainiem.

Attēla noņemšana

Vai nu izvēlieties krāsu izvēlnē Fona krāsa, vai vēlreiz atveriet Fona attēls un dialogā noklikšķiniet uz Noņemt attēlu. Elements atgriežas pie savas fona krāsas.

Uzziniet vairāk par produktu: https://vitextra.com/lv/products/smart-tiles