Ipatupad ang pamamaraan sa CSS
Kung ikaw ay nagdidisenyo ng isang website, maaari kang maging interesado sa pag-aaral kung paano lumikha ng isang nakapirming larawan sa background o watermark sa isang web page. Ito ay isang karaniwang paggamot sa disenyo na naging popular na online sa loob ng ilang oras. Ito ay isang madaling gamitin na epekto sa iyong web design bag ng mga trick.
Kung hindi mo pa nagawa ito bago o sinubukan ito dati nang walang swerte, ang proseso ay maaaring mukhang intimidating, ngunit ito ay talagang hindi masyadong mahirap sa lahat. Sa maikling tutorial na ito, makakakuha ka ng impormasyon na kailangan mo upang makabisado ang pamamaraan sa loob ng ilang minuto gamit ang CSS.
Nagsisimula
Ang mga larawan sa background o mga watermark (na kung saan ay talagang napaka-liwanag na larawan sa background) ay may kasaysayan sa naka-print na disenyo. Matagal nang isinama ng mga dokumento ang mga watermark sa kanila upang pigilan ang mga ito na makopya. Bukod pa rito, maraming mga flyer at mga polyeto ang gumagamit ng malalaking mga larawan sa background bilang bahagi ng disenyo para sa naka-print na piraso. Ang disenyo ng web ay may mahabang hiram na mga estilo mula sa mga larawan sa pag-print at sa background ay isa sa mga estilo ng hiram na ito.
Ang malalaking mga larawan sa background ay madaling lumikha gamit ang sumusunod na tatlong mga katangian ng estilo ng CSS :
- background-image
- Ulitin ang background
- background-attachment
- laki ng background
Background-Image
Gagamitin mo ang background-image upang tukuyin ang imahe na gagamitin bilang iyong watermark. Ang estilo na ito ay gumagamit lamang ng path ng file upang i-load ang isang imahe na mayroon ka sa iyong site, malamang sa isang direktoryo na may pangalang "mga imahe."
background-image: url (/images/page-background.jpg);
Mahalaga na ang imahe mismo ay mas magaan o mas malinaw kaysa sa isang normal na imahe. Ito ay lilikha ng hitsura ng "watermark" na kung saan ang isang semi-transparent na imahe ay namamalagi sa likod ng teksto, graphics, at iba pang mga pangunahing elemento ng web page. Kung wala ang hakbang na ito, ang larawan sa background ay makikipagkumpitensya sa impormasyon sa iyong pahina at gawin itong mahirap na basahin.
Maaari mong ayusin ang larawan sa background sa anumang program sa pag-edit tulad ng Adobe Photoshop.
Background-Repeat
Ang susunod na pag-ulit ng property ay susunod. Kung nais mo ang iyong imahe na maging isang malaking watermark-style na graphic, gagamitin mo ang property na ito upang gawing isang beses lamang ang imahe na ipinapakita.
Ulit-ulitin: walang-ulitin;
Kung wala ang "no-repeat" na ari-arian, ang default ay ang pag-ulit ng imahe ay paulit-ulit sa pahina. Ito ay hindi kanais-nais sa karamihan sa mga modernong disenyo ng web page, kaya ang estilo na ito ay dapat isaalang-alang na mahalaga sa iyong CSS.
Background-Attachment
Ang background-attachment ay isang ari-arian na maraming nalalaman ng mga taga-disenyo ng web. Ang paggamit nito ay nagpapanatili sa iyong larawan sa background na naayos kapag ginamit mo ang "nakapirming" ari-arian. Ito ay kung ano ang lumiliko sa larawang iyon sa isang watermark na nakatakda sa pahina.
Ang default na halaga para sa property na ito ay "mag-scroll." Kung hindi mo tukuyin ang isang halaga ng attachment sa background, ang background ay mag-scroll kasama ang natitirang bahagi ng pahina.
background-attachment: naayos;
Sukat ng Background
Ang laki ng background ay isang mas bagong CSS property. Pinapayagan ka nitong itakda ang sukat ng isang background batay sa viewport na tinitingnan nito. Napakahusay ito para sa mga tumutugon na mga website na ipapakita sa iba't ibang laki sa iba't ibang mga device .
background-size: cover;
Dalawang kapaki-pakinabang na halaga ang magagamit mo para sa ari-arian na ito ay kasama ang:
- Cover - Sinusukat ang background kaya ang buong lapad o buong taas ay ipinapakita. Nangangahulugan ito na ang ilang mga bahagi ng imahe ay maaaring hindi lumitaw sa screen ngunit na ang buong lugar ay sakop.
- Maglaman - Tinitimbang ang imahe upang pareho ang buong lapad at taas ay ipinapakita sa lugar na naka-istilong. Ang imahe ay hindi pinutol, ngunit ang downside ay ang mga bahagi ng lugar ay maaaring hindi sakop ng imahe.
Ang pagdaragdag ng CSS sa Iyong Pahina
Matapos mong maunawaan ang mga katangian sa itaas at ang kanilang mga halaga, maaari mong idagdag ang mga estilo sa iyong website.
Idagdag ang sumusunod sa HEAD ng iyong web page kung gumagawa ka ng isang pahina ng isang pahina. Idagdag ito sa mga estilo ng CSS ng isang panlabas na style sheet kung ikaw ay nagtatayo ng isang multi-page na site at nais mong samantalahin ang kapangyarihan ng isang panlabas na sheet.