Cara Menegangkan Imej Latar Belakang untuk Mengayakan Laman Web

Beri minat visual laman web anda dengan grafik latar belakang

Imej adalah bahagian penting dalam reka bentuk laman web yang menarik. Ini termasuk penggunaan imej latar belakang. Ini adalah imej dan grafik yang digunakan di belakang kawasan halaman berbanding dengan imej yang dibentangkan sebagai sebahagian daripada halaman kandungan. Imej latar belakang ini boleh menambah minat visual ke halaman dan membantu anda mencapai reka bentuk visual yang mungkin anda cari pada halaman.

Jika anda mula bekerja dengan imej latar belakang, anda pasti akan masuk ke dalam senario di mana anda mahu imej meregangkan agar sesuai dengan halaman.

Ini terutama berlaku untuk laman web yang responsif yang dihantar kepada pelbagai peranti dan saiz skrin .

Keinginan untuk meregangkan imej latar belakang adalah keinginan yang sangat biasa bagi pereka web kerana tidak setiap imej sesuai dengan ruang laman web. Daripada menetapkan saiz yang tetap, peregangan imej membolehkannya untuk flex untuk menyesuaikan halaman tidak kira seberapa luas atau mempersempit tetingkap penyemak imbas .

Cara terbaik untuk meregangkan imej agar sesuai dengan latar belakang halaman adalah menggunakan sifat CSS3 , untuk saiz latar belakang. Berikut adalah contoh yang menggunakan imej latar belakang untuk badan halaman dan yang menetapkan saiz hingga 100% supaya ia sentiasa menghulurkan untuk menyesuaikan skrin.

badan {
latar belakang: url (bgimage.jpg) no-repeat;
saiz latar belakang: 100%;
}

Menurut caniuse.com, harta ini berfungsi dalam IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, dan pada semua pelayar mudah alih utama. Ini melindungi anda untuk semua penyemak imbas moden yang tersedia hari ini, yang bermaksud anda harus menggunakan harta ini tanpa rasa takut bahawa ia tidak akan berfungsi pada skrin seseorang.

Mengambil Latar Belakang Diregangkan di Pelayar Lama

Sangat tidak mungkin anda perlu menyokong mana-mana pelayar yang lebih tua daripada IE9, tetapi mari kita anggap bahawa anda khawatir bahawa IE8 tidak menyokong harta ini. Dalam keadaan itu, anda boleh menimbulkan latar belakang yang tidak disengajakan. Dan anda boleh menggunakan awalan pelayar untuk Firefox 3.6 (-moz-background-size) dan Opera 10.0 (-o-background-size).

Cara paling mudah untuk mengaburkan imej latar belakang palsu ialah meregangkannya di seluruh halaman. Kemudian anda tidak mempunyai ruang tambahan atau perlu bimbang bahawa teks anda sesuai di kawasan yang diregangkan. Inilah cara untuk melakukannya:

id = "bg" />

1. Pertama, pastikan semua pelayar mempunyai ketinggian 100%, 0 margin, dan 0 padding pada elemen BODY dan HTML. Letakkan yang berikut di kepala dokumen HTML anda:

2. Tambahkan imej yang anda ingin menjadi latar belakang sebagai elemen pertama halaman web, dan berikannya id "bg":

3. Poskan imej latar belakang supaya ia tetap di bahagian atas dan kiri dan 100% lebar dan tinggi 100%. Tambah ini pada helaian gaya anda:

   img # bg {
   kedudukan: tetap;
   atas: 0;
   kiri: 0;
   lebar: 100%;
   ketinggian: 100%;
   }

4. Tambah semua kandungan anda ke halaman di dalam elemen DIV dengan id "kandungan". Tambahkan DIV di bawah imej:

   Semua kandungan anda di sini - termasuk tajuk, perenggan, dll.

   Nota: menarik untuk melihat halaman anda sekarang. Imej itu hendaklah dipaparkan menghulurkan, tetapi kandungan anda hilang sepenuhnya. Mengapa? Kerana imej latar belakang adalah 100% ketinggian, dan pembahagian kandungan adalah selepas imej dalam aliran dokumen - kebanyakan pelayar tidak akan memaparkannya.
   
5. Posisi kandungan anda supaya relatif dan mempunyai z-indeks 1. Ini akan membawanya ke atas imej latar belakang dalam pelayar patuh standard. Tambah ini pada helaian gaya anda:

   #kandungan {
   kedudukan: saudara;
   z-indeks: 1;
   }

1. Tetapi anda tidak selesai. Internet Explorer 6 tidak mematuhi piawaian dan masih ada masalah. Terdapat banyak cara untuk menyembunyikan CSS dari setiap penyemak imbas tetapi IE6, tetapi yang paling mudah (dan paling tidak mungkin menyebabkan masalah lain) adalah menggunakan komentar bersyarat. Letakkan yang berikut selepas lembaran gaya anda di kepala dokumen anda:

2. Di dalam komen yang diserlahkan, tambahkan helaian gaya lain dengan beberapa gaya untuk mendapatkan IE 6 untuk bermain bagus:

3. Pastikan untuk menguji dalam IE 7 dan IE 8 juga. Anda mungkin perlu menyesuaikan ulasan untuk menyokong mereka juga. Walau bagaimanapun, ia berfungsi apabila saya mengujinya.

OK - ini diandaikan WAY berlebihan. Sangat sedikit laman web yang perlu menyokong IE 7 atau 8 lagi, lebih kurang IE6!

Oleh itu, pendekatan ini adalah antiquated dan mungkin tidak perlu untuk anda. Saya tinggalkan di sini lebih sebagai model keingintahuan tentang perkara yang lebih sukar sebelum semua pelayar kami bermain dengan baik sekali!

Mengambil Gambar Latar Belakang Dihidupkan Lebih Ruang Kecil

Anda boleh menggunakan teknik yang serupa untuk menimbulkan imej latar belakang palsu di seluruh DIV atau elemen lain pada halaman web anda. Ini agak lebih rumit kerana anda sama ada menggunakan kedudukan mutlak atau mempunyai isu jarak aneh untuk bahagian lain halaman anda.

1. Letakkan imej pada halaman yang saya mahu gunakan sebagai latar belakang.

2. Dalam helaian gaya, tetapkan lebar dan ketinggian untuk imej. Perhatikan, anda boleh menggunakan peratusan untuk lebar atau ketinggian, tetapi saya lebih mudah menyesuaikan dengan nilai panjang untuk ketinggian.

   img # bg {
   lebar: 20em;
   ketinggian: 30em;
   }

3. Letakkan kandungan anda dalam div dengan id "kandungan" seperti yang telah kami lakukan di atas:

   Semua kandungan anda di sini

4. Gaya kandungan div menjadi lebar dan ketinggian yang sama seperti imej latar belakang:

   div # content {
   lebar: 20em;
   ketinggian: 30em;
   }

5. Kemudian letakkan kandungan sehingga ketinggian yang sama dengan imej. Jadi jika imej anda 30em anda akan mempunyai gaya teratas: -30em; Jangan lupa memasukkan z-indeks 1 pada kandungan.

   #kandungan {
   kedudukan: saudara;
   atas: -30em;
   z-indeks: 1;
   lebar: 20em;
   ketinggian: 30em;
   }

6. Kemudian tambahkan z-indeks -1 untuk pengguna IE 6, seperti yang anda lakukan di atas:

Sekali lagi, dengan saiz latar belakang menikmati sokongan penyemak imbas yang luas sekarang, pendekatan ini juga sangat mungkin tidak perlu dan dibentangkan sebagai produk zaman dahulu. Sekiranya anda mahu menggunakan pendekatan ini, pastikan anda menguji ini sebagai pelayar sebanyak yang anda boleh.

Dan jika kandungan anda berubah saiz, anda perlu mengubah saiz bekas dan imej latar belakang anda, jika tidak, anda akan berakhir dengan hasil yang pelik.