Izpildīt tehniku ar CSS
Ja veidojat vietni, jūs, iespējams, interesēsit uzzināt, kā tīmekļa lapā izveidot fiksētu fona attēlu vai ūdenszīmi. Šī ir kopēja dizaina procedūra, kas ir populāra tiešsaistē jau ilgu laiku. Tas ir ērts efekts, lai jūsu tīmekļa dizaina maisu trikus.
Ja jūs to vēl neesat izdarījis vai to iepriekš esat izmēģinājis bez panākumiem, process var likties biedējoši, taču tas vispār nav ļoti grūti. Izmantojot šo īsu pamācību, jūs saņemsiet nepieciešamo informāciju, lai pārzinātu tehniku dažu minūšu laikā, izmantojot CSS.
Darba sākšana
Fona attēli vai ūdenszīmes (kas tiešām ir tikai ļoti vieglie fona attēli) ir vēsture drukātā dizainā. Dokumentos jau sen ir iekļauti ūdenszīmes, lai novērstu to kopēšanu. Turklāt daudzi skrejlapas un brošūras izmanto lielu fona attēlus, kas ir daļa no apdrukāto gabalu dizaina. Web dizains ir ilgi aizņēmies stili no drukāšanas un fona attēli ir viens no šiem aizņemtiem stiliem.
Šos lielos fona attēlus ir viegli izveidot, izmantojot šādus trīs CSS stila rekvizītus:
- fona attēls
- fona atkārtojums
- fona piestiprinājums
- fona izmērs
Fona attēls
Jūs izmantosiet fona attēlu, lai definētu attēlu, kas tiks izmantots kā jūsu ūdenszīme. Šis stils vienkārši izmanto faila ceļu, lai ielādētu jūsu vietnē esošu attēlu, iespējams, direktorijā ar nosaukumu "attēli".
fona-attēls: url (/images/page-background.jpg);
Ir svarīgi, lai pats attēls būtu vieglāks vai pārredzamāks nekā parasts attēls. Tas radīs šo "ūdenszīmju" izskatu, kurā puscaurspīdīgs attēls atrodas tekstā, grafikā un citos galvenajos tīmekļa lapas elementos. Bez šī soli fona attēls konkurēs ar informāciju savā lapā un padarīs to grūti lasīt.
Jūs varat pielāgot fona attēlu jebkurā rediģēšanas programmā, piemēram, Adobe Photoshop.
Fona atkārtošana
Fona atkārtotas īpašības nāk nākamo. Ja vēlaties, lai jūsu attēls būtu liels ūdenszīmju stila grafiskais attēls, izmantojiet šo īpašību, lai šo attēlu parādītu tikai vienreiz.
fona atkārtojums: nav-atkārtot;
Bez īpašības "nav atkārtot", noklusējums ir tāds, ka attēls atkal atkal tiks atkal parādīts lapā. Tas nav vēlams lielākajā daļā mūsdienu mājas lapas dizainu, tāpēc šis stils ir jāuzskata par būtisku jūsu CSS.
Fona pielikums
Fona pievienojums ir īpašums, ko daudzi tīmekļa izstrādātāji aizmirst par. Izmantojot to, fona attēls tiek fiksēts vietā, kad lietojat "fiksēto" īpašumu. Tas, kas pārvērš šo attēlu par ūdenszīmi, kas ir fiksēta lapā.
Noklusējuma vērtība šim īpašumam ir "ritināt". Ja fona pielikumu vērtība netiks norādīta, fons ritinās kopā ar pārējo lapu.
fona piestiprinājums: fiksēts;
Fona izmērs
Fona izmērs ir jaunāks CSS īpašums. Tas ļauj jums iestatīt fona izmēru, pamatojoties uz skatu punktu, kurā tas tiek skatīts. Tas ir ļoti noderīgi adaptīvām vietnēm, kuras dažādās ierīcēs parādīsies dažādos izmēros.
fona izmērs: vāciņš;
Divas noderīgas vērtības, kuras varat izmantot šim īpašumam, ir šādas:
- Cover - Svaru fonu, tādējādi tiek parādīts pilnais platums vai pilnais augstums. Tas nozīmē, ka daži attēla elementi var netikt parādīti ekrānā, bet visa teritorija tiks pārklāta.
- Contain - Svaru attēla, lai gan viss platums un augstums tiek parādīti stilā. Attēls nav nogriezts, bet negatīvie ir tas, ka attēlā var nebūt attēla daļas.
CSS pievienošana jūsu lapai
Kad esat sapratis iepriekš minētās īpašības un to vērtības, varat pievienot šos stilus savai vietnei.
Ja veidojat vienas lapas vietni, pievienojiet savu vietni HEAD. Pievienojiet to ārējo stilu lapas CSS stili, ja veidojat vairāku lapu vietni un vēlaties izmantot ārējās lapas jaudu.