Jalankan teknik dengan CSS
Jika anda merancang laman web, anda mungkin berminat mempelajari cara membuat imej latar belakang atau watermark tetap pada halaman web. Ini adalah rawatan reka bentuk biasa yang telah popular dalam talian untuk beberapa waktu. Ia adalah satu kesan yang berguna untuk mempunyai dalam beg reka bentuk web anda helah.
Sekiranya anda belum melakukan ini sebelum atau pernah mencuba sebelum ini, proses itu mungkin kelihatan menakutkan, tetapi sebenarnya tidak begitu sukar sama sekali. Dengan tutorial singkat ini, anda akan mendapat maklumat yang anda perlukan untuk menguasai teknik itu dalam masa beberapa minit menggunakan CSS.
Bermula
Imej latar belakang atau watermark (yang sebenarnya hanya imej latar belakang yang sangat terang) mempunyai sejarah dalam reka bentuk bercetak. Dokumen telah lama memasukkan tanda air pada mereka untuk menghalang mereka daripada disalin. Di samping itu, banyak risalah dan brosur menggunakan imej latar belakang yang besar sebagai sebahagian daripada reka bentuk untuk bahagian yang dicetak. Reka bentuk web mempunyai gaya yang dipinjam dari imej cetakan dan latar belakang adalah salah satu gaya yang dipinjam.
Imej latar belakang yang besar ini mudah dibuat dengan menggunakan tiga gaya CSS berikut:
- imej latar belakang
- ulangi latar belakang
- lampiran-lampiran
- saiz latar belakang
Latar belakang-Imej
Anda akan menggunakan imej latar belakang untuk menentukan imej yang akan digunakan sebagai watermark anda. Gaya ini hanya menggunakan laluan fail untuk memuatkan imej yang anda ada di tapak anda, mungkin dalam direktori bernama "imej."
background-image: url (/images/page-background.jpg);
Adalah penting bahawa imej itu sendiri lebih ringan atau lebih telus daripada imej biasa. Ini akan mewujudkan rupa "penanda air" di mana imej separa telus terletak di belakang teks, grafik, dan elemen utama laman web yang lain. Tanpa langkah ini, imej latar belakang akan bersaing dengan maklumat di halaman anda dan menjadikannya sukar untuk dibaca.
Anda boleh menyesuaikan imej latar belakang dalam mana-mana program penyuntingan seperti Adobe Photoshop.
Ulang-Latar Belakang
Hartanah berulang-belakang datang seterusnya. Sekiranya anda mahu imej anda menjadi grafik gaya air yang besar, anda akan menggunakan harta ini untuk menjadikan imej itu dipaparkan sekali sahaja.
ulangi latar belakang: tiada ulang;
Tanpa "no-repeat" property, lalai adalah bahawa imej akan berulang-ulang di muka halaman. Ini tidak diingini dalam reka bentuk halaman web yang paling moden, jadi gaya ini harus dianggap penting dalam CSS anda.
Lampiran-Lampiran
Lampiran-lampiran adalah harta yang banyak dilupakan oleh pereka web. Menggunakannya menyimpan imej latar belakang anda tetap di tempat apabila anda menggunakan harta "tetap". Ia adalah apa yang mengubah imej itu menjadi watermark yang ditetapkan pada halaman.
Nilai lalai untuk harta ini adalah "tatal." Jika anda tidak menentukan nilai lampiran latar belakang, latar belakang akan tatal bersama-sama dengan seluruh halaman.
lampiran-lampiran: tetap;
Saiz Latar Belakang
Saiz latar belakang adalah sifat CSS yang lebih baru. Ia membolehkan anda menetapkan saiz latar belakang berdasarkan viewport yang sedang dilihat. Ini sangat berguna untuk laman web yang responsif yang akan dipaparkan pada saiz yang berbeza pada peranti yang berbeza .
saiz latar belakang: penutup;
Dua nilai yang berguna yang boleh anda gunakan untuk harta ini termasuk:
- Tutup - Menimbang latar belakang sama ada lebar penuh atau ketinggian penuh ditunjukkan. Ini bermakna beberapa bahagian imej mungkin tidak muncul di skrin tetapi keseluruhan kawasan akan dilindungi.
- Mengandung - Menimbang imej supaya kedua-dua lebar dan ketinggian ditunjukkan di kawasan yang digayakan. Imej tidak dipotong, tetapi kelemahannya ialah bahagian-bahagian kawasan tersebut tidak boleh diliputi oleh imej.
Menambah CSS ke Halaman Anda
Selepas anda memahami sifat di atas dan nilai mereka, anda boleh menambah gaya ini ke laman web anda.
Tambah yang berikut ke HEAD halaman web anda jika anda membuat halaman satu halaman. Tambahkannya ke gaya CSS pada gaya gaya luaran jika anda sedang membina laman berbilang halaman dan ingin memanfaatkan kekuatan helaian luaran.