Fuatilia mbinu na CSS
Ikiwa unaunda tovuti, unaweza kuwa na nia ya kujifunza jinsi ya kuunda picha ya background iliyopangwa au watermark kwenye ukurasa wa wavuti. Hii ni matibabu ya kawaida ya kubuni ambayo imekuwa maarufu mtandaoni kwa muda mrefu. Ni athari nzuri ya kuwa na mfuko wako wa kubuni wa wavuti.
Ikiwa hujafanya hili kabla au ulijaribu hapo awali bila bahati, mchakato huo unaweza kuonekana kuwa wa kutisha, lakini kwa kweli si vigumu sana. Kwa mafunzo haya mafupi, utapata habari unayohitaji ili ujue mbinu katika suala la dakika kwa kutumia CSS.
Kuanza
Picha za asili au watermarks (ambazo ni picha nyembamba tu za asili) zina historia katika kubuni iliyochapishwa. Nyaraka za muda mrefu zimejumuisha watermark juu yao ili zizuie kutoka kunakiliwa. Zaidi ya hayo, vipeperushi na vipeperushi nyingi hutumia picha kubwa za asili kama sehemu ya kubuni kwa kipande kilichochapishwa. Muundo wa wavuti umetayarisha mitindo kwa muda mrefu kutoka picha za kuchapisha na za nyuma ni mojawapo ya mitindo hii iliyokopwa.
Picha hizi za msingi za asili ni rahisi kuunda kutumia vitu vitatu vya CSS zifuatazo:
- picha ya background
- kurudia nyuma
- attachment background
- ukubwa wa nyuma
Image-Background
Utatumia picha ya background ili kufafanua picha ambayo itatumika kama watermark yako. Mtindo huu unatumia njia ya faili ya kupakia picha unayo kwenye tovuti yako, iwezekanavyo katika saraka inayoitwa "picha."
background-image: url (/images/page-background.jpg);
Ni muhimu kwamba picha yenyewe ni nyepesi au uwazi zaidi kuliko picha ya kawaida. Hii itaunda kuwa "watermark" inaonekana ambayo picha ya nusu ya uwazi imela nyuma ya maandiko, graphics, na mambo mengine makuu ya ukurasa wa wavuti. Bila hatua hii, picha ya historia itakuwa kushindana na habari kwenye ukurasa wako na itafanya kuwa vigumu kusoma.
Unaweza kurekebisha picha ya historia katika programu yoyote ya uhariri kama vile Adobe Photoshop.
Rudi-Rudia
Malipo ya kurudi nyuma yanaja ijayo. Ikiwa unataka picha yako kuwa kielelezo kikubwa cha watermark-style, utatumia mali hii kufanya picha hiyo inaonyeshwa mara moja tu.
Rudi nyuma-kurudia: usirudia;
Bila mali isiyo "kurudia", chaguo-msingi ni kwamba picha itarudia mara kwa mara kwenye ukurasa. Hii haipaswi katika miundo ya kisasa ya ukurasa wa wavuti, hivyo mtindo huu unapaswa kuchukuliwa kuwa muhimu katika CSS yako.
Kiambatisho-Kiambatisho
Msanii wa asili ni mali ambayo wabunifu wengi wa wavuti husahau. Kuitumia kunaendelea picha yako ya asili iliyowekwa wakati unatumia mali "fasta". Ni kile kinachogeuka picha hiyo ndani ya watermark iliyowekwa kwenye ukurasa.
Thamani ya msingi ya mali hii ni "futa." Ikiwa hutaja thamani ya kiambatisho, historia itaendelea pamoja na wengine wote wa ukurasa.
attachment background: fasta;
Ukubwa wa asili
Ukubwa wa asili ni mali mpya ya CSS. Inakuwezesha kuweka ukubwa wa historia kulingana na mtazamo unaozingatiwa. Hii inasaidia sana kwa tovuti za msikivu ambazo zitaonyesha kwa ukubwa tofauti kwenye vifaa tofauti .
ukubwa wa nyuma: kifuniko;
Maadili mawili ya manufaa ambayo unaweza kutumia kwa mali hii ni pamoja na:
- Funika - Mipaka ya background ili ama upana kamili au urefu kamili umeonyeshwa. Hii ina maana kwamba baadhi ya sehemu za picha haziwezi kuonekana kwenye skrini lakini eneo lote litafunikwa.
- Weka - Masiko ya picha hivyo upana wote na ukubwa wote huonyeshwa katika eneo hilo lililowekwa. Picha haifai, lakini shida ni kwamba sehemu za eneo hilo haziwezi kufunikwa na picha.
Kuongeza CSS kwenye Ukurasa Wako
Baada ya kuelewa mali zilizo juu na maadili yao, unaweza kuongeza mitindo hii kwenye tovuti yako.
Ongeza zifuatazo kwa HEAD ya ukurasa wako wa wavuti ikiwa unafanya tovuti moja ya ukurasa. Ongeza kwenye mitindo ya CSS ya karatasi ya nje ya mtindo ikiwa unafanya tovuti ya ukurasa mbalimbali na unataka kutumia faida ya karatasi ya nje.
mwili {
background-image: url (/images/page-background.jpg);
Rudi nyuma-kurudia: usirudia;
attachment background: fasta;
ukubwa wa nyuma: kifuniko;
}
// ->
Badilisha URL ya picha yako ya asili ili kufanana na jina la faili na faili ya faili inayofaa kwa tovuti yako. Fanya mabadiliko mengine yanayofaa kufanana na mpango wako pia na utakuwa na watermark.
Unaweza kutaja nafasi, pia
Ikiwa unataka kuweka watermark mahali fulani kwenye ukurasa wako wa wavuti, unaweza kufanya hivyo pia. Kwa mfano, unaweza kutaka watermark katikati ya ukurasa au labda kwenye kona ya chini, kinyume na kona ya juu, ambayo ni ya msingi.
Kwa kufanya hivyo, ongeza mali ya msimamo wa nyuma kwa mtindo wako. Hii itaweka picha kwenye doa halisi ambayo ungependa ikaonekana. Unaweza kutumia maadili ya pixel, asilimia, au mipangilio ili kufikia athari hiyo ya nafasi.
msimamo wa nyuma: katikati;