Ngaéksekusi téknik kalawan CSS
Lamun nuju ngarancang ramatloka, Anjeun bisa jadi resep diajar kumaha carana nyieun hiji gambar tukang dibenerkeun atawa watermark dina kaca web. Ieu perlakuan design umum anu geus popular online pikeun rada sababaraha waktos. Éta pangaruh gunana pikeun mibanda dina kantong desain web Anjeun tina trik.
Upami anjeun teu acan rengse ieu saméméh atawa geus diusahakeun eta saméméhna tanpa tuah, prosesna bisa sigana intimidating, tapi éta sabenerna mah susah pisan pisan. Kalawan tutorial singget ieu, Anjeun bakal nampi informasi nu peryogi ngawasaan téknik dina hitungan menit make CSS.
Ngamimitian
Kasang Tukang gambar atanapi watermarks (anu aya bener euy gambar latar pisan lampu) boga sajarah dina rarancang dicitak. Dokumén geus lila kaasup watermarks on aranjeunna pikeun nyegah eta tina keur disalin. Sajaba ti, loba flyers sarta brosur nganggo gambar tukang badag salaku bagian tina rarancang keur sapotong dicitak. Desain Web geus lila injeuman gaya ti print jeung latar gambar téh salah sahiji gaya injeuman.
Ieu gambar tukang badag anu gampang pikeun nyieun ngagunakeun handap tilu gaya CSS sipat:
- tukang-gambar
- tukang-ulang
- tukang-kantétan
- tukang-ukuran
Tukang-Gambar
Anjeun bakal make kasang tukang-gambar pikeun nangtukeun gambar anu bakal dipaké salaku watermark Anjeun. gaya ieu saukur ngagunakeun jalur file pikeun muka hiji gambar nu gaduh dina situs anjeun, dipikaresep dina diréktori ngaranna "Gambar".
tukang-gambar: url (/images/page-background.jpg);
Ieu Kadé gambar sorangan torek atawa leuwih transparan ti gambar normal. Ieu bakal nyieun eta "watermark" katingal nu hiji gambar semi-transparan perenahna tukangeun téks, grafik, jeung elemen utama lianna tina kaca web. Tanpa hambalan ieu, gambar tukang bakal bersaing jeung informasi dina kaca anjeun sarta nyieun hésé maca.
Anjeun tiasa nyaluyukeun gambar tukang di mana wae program na rohangan ngédit kayaning Adobe Photoshop.
Tukang-Ulang
Harta tukang-ulang asalna salajengna. Upami anjeun hoyong gambar anjeun pikeun janten watermark-gaya grafis badag, anjeun bakal make sipat ieu sangkan nu mintonkeun gambar ukur sakali.
tukang-ulang: no-ulang;
Tanpa "no-ulang" harta, standar teh nya eta gambar bakal ngulang leuwih sarta leuwih deui dina kaca. Ieu pikaresepeun dina paling desain kaca web modern, jadi gaya ieu kudu dianggap penting dina CSS Anjeun.
Tukang-Attachment
Tukang-kantétan nyaéta sipat nu loba web désainer poho ngeunaan. Ngagunakeun eta ngajaga gambar tukang anjeun dibereskeun di tempat mun anjeun nganggo "tetep" harta. Ieu naon kabukti gambar éta kana watermark anu dibereskeun dina kaca.
Nilai standar pikeun sipat ieu téh "ngagugulung". Mun anjeun teu tangtukeun nilai tukang-kantétan, latar bakal ngagulung sapanjang jeung sésana kaca.
tukang-kantétan: dibereskeun;
Tukang-Ukuran
Tukang-ukuranana sipat CSS anyar. Eta ngidinan Anjeun pikeun nangtukeun ukuran tina latar dumasar kana viewport eta keur ditempo di. Ieu pohara mantuan pikeun jaba responsif anu bakal nembongkeun dina ukuran béda dina alat béda .
tukang-ukuran: panutup;
Dua nilai mantuan anjeun tiasa nganggo keur sipat ieu ngawengku:
- Panutup - skala tukang sangkan boh lébar atawa jangkungna pinuh ieu ditémbongkeun. Ieu ngandung harti yén sawatara bagian gambar nu teu némbongan dina layar tapi yén sakabéh aréa bakal katutupan.
- Ngandung - skala gambar kitu duanana sakabéh lebar jeung jangkungna téh ditémbongkeun di wewengkon keur styled. gambar henteu neukteuk off, tapi downside teh nya eta bagian tina wewengkon bisa jadi teu jadi katutupan ku gambar.
Nambahkeun CSS ka Page anjeun
Sanggeus anjeun ngartos sipat di luhur tur nilai maranéhanana, Anjeun bisa nambah gaya ieu mun ramatloka anjeun.
Tambahkeun di handap kana sirah kaca web Anjeun upami Anjeun anu nyieun situs single-kaca. Tambahkeun deui ka gaya CSS tina hiji gaya lambar éksternal lamun keur ngawangun situs multi-kaca na hayang ngamangpaatkeun kakawasaan hiji lambar éksternal.
awakna {
tukang-gambar: url (/images/page-background.jpg);
tukang-ulang: no-ulang;
tukang-kantétan: dibereskeun;
tukang-ukuran: panutup;
}
// ->
Ngarobah URL ti anjeun gambar latar ka cocog Ngaran koropak tur file jalur husus anu mangrupa relevan pikeun situs anjeun. Jieun sagala parobahan séjénna luyu pikeun nyocogkeun design Anjeun kitu oge jeung anjeun gé boga watermark a.
Anjeun tiasa Sebutkeun Posisi, Teuing
Mun rék nempatkeun watermark dina lokasi husus dina kaca web, anjeun tiasa ngalakukeun éta ogé. Contona, anjeun bisa hoyong watermark di tengah kaca atawa sugan di pojok handap, sabalikna tina sudut luhur, nu standar nu.
Jang ngalampahkeun ieu, nambahan harta tukang-posisi ka gaya Anjeun. Ieu bakal nempatkeun gambar dina titik pasti yén Rék ka némbongan. Anjeun tiasa make nilai piksel, percentages, atawa alignments pikeun ngahontal éta pangaruh positioning.
tukang-posisi: puseur;