Menggunakan CSS untuk Tetapkan Imej Latar Belakang

• Mungkin 21, 2024

Pernahkah anda tertanya-tanya bagaimana laman web menguruskan reka bentuk dan gambar cantik yang terapung di belakang teks? Semuanya dilakukan melalui keajaiban Lembaran Gaya Cascading. CSS bukan sahaja membolehkan anda menunjuk imej untuk latar belakang halaman anda, ia juga membolehkan anda mengubah cara imej dipaparkan - supaya anda dapat melihat rupa yang anda inginkan.

Blok bangunan asas untuk imej latar belakang anda, cukup sesuai, 'imej latar belakang'. Anda menggunakan harta ini untuk memberitahu laman anda di mana fail imej terletak, seperti berikut:

badan {
imej latar belakang: url ("image.gif");
}

Itu sahaja yang perlu anda lakukan untuk meletakkan imej latar belakang untuk laman web anda. Sudah tentu, anda mungkin mahu menyesuaikan cara imej muncul. Katakan anda mahu imej anda bermula di bahagian atas halaman tetapi akan berpusat secara mendatar dan bukannya sejajar (penjajaran lalai). Dalam kes itu, anda akan mahu menambah 'kedudukan latar belakang' kepada peraturan CSS anda:

badan {
imej latar belakang: url ("image.gif");
kedudukan latar belakang: pusat atas;
}

Apabila mendefinisikan 'kedudukan latar belakang', nilai pertama menetapkan penjajaran melintang (kiri, tengah atau kanan) dan yang kedua menetapkan penjajaran menegak imej (atas, tengah atau bawah).

Seterusnya, anda memutuskan bahawa anda mahu menghentikan imej dari jubin (mengulangi sendiri) secara mendatar, walaupun anda mahu menggunakan jubin secara menegak. Sudah tiba masanya untuk mengeluarkan harta 'latar belakang-ulang':

badan {
imej latar belakang: url ("image.gif");
kedudukan latar belakang: pusat atas;
ulangi latar belakang: ulangan-y;
}

Menetapkan nilai untuk 'ulangi-y' memberitahu penyemak imbas untuk menyusun imej latar belakang sepanjang paksi-y, secara menegak, tetapi bukan paksi-x (secara mendatar), yang betul-betul apa yang kita mahu. Jika anda mahu jubin secara mendatar tetapi tidak secara menegak anda akan menggunakan nilai 'ulang-x' sebaliknya; jika anda tidak mahu imej itu jubin sama sekali, beri nilai 'tidak-ulang'. Nilai lalai adalah untuk menjilid imej secara mendatar dan menegak, jadi jika itu pilihan terbaik untuk imej anda, anda tidak perlu menetapkan 'background-repeat' sama sekali.

Akhirnya, anda boleh melihat 'latar belakang-lampiran' harta. Secara lalai, imej anda akan tatal sebagai skrol halaman, jadi jika anda tidak mengulangi imej secara menegak dan anda mempunyai laman yang panjang, imej anda tidak akan dilanjutkan ke bahagian bawah halaman. Anda boleh mengubahnya dengan menetapkan 'latar belakang-lampiran' kepada 'tetap', yang menyebabkan imej latar belakang tetap berada di tempat yang sama pada monitor tanpa mengira cara skrol halaman. Sekarang peraturan imej latar belakang anda akan kelihatan seperti ini:

badan {
imej latar belakang: url ("image.gif");
kedudukan latar belakang: pusat atas;
ulangi latar belakang: ulangan-y;
lampiran-lampiran: tetap;
}


Jika anda ingin mengekalkan peraturan CSS anda sekecil mungkin, anda boleh menggabungkan semua nilai latar anda menjadi satu baris dengan menggunakan 'latar belakang' harta, seperti ini:

latar belakang {
url ("image.gif") atas pusat tetap tetap ulangan;
}

Apabila menggunakan 'latar belakang' harta, anda mesti menyenaraikan nilai dalam susunan tertentu:
[warna latar belakang (jika digunakan)] [background-image] [latar belakang-ulang] [latar belakang-lampiran] [kedudukan latar belakang]. Anda boleh meninggalkan apa-apa nilai yang anda tidak perlukan, anda hanya perlu menyenaraikan mana-mana nilai yang anda gunakan dalam perintah yang betul atau peraturan itu tidak akan berfungsi.

Arahan Video: Membuat Teks Diatas (menimpa) Gambar - HTML CSS (Mungkin 2024).