Kemampuan untuk meregangkan gambar latar hingga lebar tetingkap penyemak imbas menggunakan CSS hanya muncul dengan pelepasan spesifikasi terbarunya - CSS3. Malangnya, setakat ini sebilangan besar pelayar web menggunakan penyemak imbas awal yang tidak memahami spesifikasi CSS3. Oleh itu, anda harus membuat pilihan - sama ada menggunakan penyelesaian penyemak imbas yang kurang senang, tetapi bersilang, atau berteknologi tinggi, tetapi untuk khalayak terhad. Mari pertimbangkan kedua-dua pilihan.
Perlu
Pengetahuan asas HTML dan CSS
Arahan
Langkah 1
Pilihan pertama adalah berdasarkan spesifikasi bahasa CSS sebelumnya. Anda perlu membuat struktur kod HTML yang mempunyai dua lapisan bertindih, satu di atas yang lain. Lapisan (div) dapat diregangkan hingga lebar layar dalam spesifikasi bahasa penerangan gaya cascading lama. Di bahagian bawah lapisan, anda perlu meletakkan gambar latar, dan di bahagian atas akan meletakkan semua kandungan halaman. Struktur seperti dalam dokumen mungkin kelihatan seperti ini:
Ini akan menjadi kandungan halaman
Dan penerangan gaya untuk struktur ini harus diletakkan di bahagian tajuk. Contohnya, ini:
html, badan {
margin: 0px;
tinggi: 100%;
}
#kawasan belakang {
kedudukan: mutlak;
lebar: 100%;
tinggi: 100%;
}
# orang {
kedudukan: mutlak;
lebar: 100%;
tinggi: 100%;
z-indeks: 2;
}
Di sini lapisan dengan latar belakang ID (ini adalah gambar latar belakang anda) dan badan (ini adalah lapisan untuk kandungan halaman) ditetapkan pada kedudukan mutlak dan lebar dan tinggi 100%. Di samping itu, lapisan kandungan diberi nombor siri z-index = 2. Ini menentukan "kedalaman" lapisan - semakin besar, semakin jauh dari "bawah" lapisan ini terletak. Dalam kes kami, ia akan berada di atas lapisan latar belakang, yang menggunakan indeks z lalai.
Langkah 2
Kod yang lengkap mungkin kelihatan seperti ini:
html, badan {
margin: 0px;
tinggi: 100%;
}
#kawasan belakang {
kedudukan: mutlak;
lebar: 100%;
tinggi: 100%;
}
# orang {
kedudukan: mutlak;
lebar: 100%;
tinggi: 100%;
z-indeks: 2;
}
Ini akan menjadi kandungan halaman
Jangan lupa ganti nama fail gambar latar fon.png.
Langkah 3
Pilihan kedua akan menggunakan sifat ukuran latar belakang yang diperkenalkan di CSS3. Pada masa yang sama, tambahkan sifat serupa dengan definisi gaya yang sebelumnya digunakan oleh penyemak imbas Mozilla Firefox, Google Chrome dan Opera. Blok keterangan gaya dalam versi ini mungkin kelihatan seperti ini:
html {
latar belakang: url (fon.png) pusat tidak berulang berulang tetap;
-webkit-background-size: penutup;
-moz-latar belakang-ukuran: penutup;
-o-latar belakang-ukuran: penutup;
latar belakang: penutup;
}
Dan di sini jangan lupa ganti nama fail gambar latar fon.png. Dalam badan dokumen itu sendiri, tidak diperlukan pembinaan khas dalam versi ini.
