Laman bersarang: bagaimana untuk membuat gambar latar belakang html

Ramai pereka web baru, hanya untuk menyelidiki ke dalam intipati penciptaan laman web, sering tertanya-tanya bagaimana untuk melakukan imej latar belakang html. Dan jika sebahagian daripada mereka boleh menangani masalah ini, ia masih menjadi masalah pada masa regangan lebar keseluruhan imej pada monitor. Pada masa yang sama saya ingin melihat laman web ini dipaparkan sepercaman pada semua pelayar, jadi ia perlu memenuhi keperluan pelayar. Anda boleh menetapkan latar belakang dalam dua cara: dengan menggunakan tag HTML dan gaya CSS. Setiap untuk dirinya memilih pilihan yang terbaik. Sudah tentu, gaya CSS adalah lebih mudah, kerana kod yang disimpan dalam fail yang berasingan dan tidak mengambil orang-tambahan di dalam tag tapak utama, tetapi pertama mari kita kaji satu kaedah yang mudah untuk memasang imej pada latar belakang laman web ini.

tag HTML asas untuk mewujudkan latar belakang

Jadi, kita pergi kepada persoalan bagaimana untuk membuat imej latar belakang dalam html pada skrin. Untuk kelihatan laman yang indah, anda perlu memahami satu terperinci agak penting: ia adalah cukup hanya untuk membuat latar belakang kecerunan atau cat warna yang kukuh, tetapi jika anda perlu memasukkan imej latar belakang, ia tidak akan menghulurkan lebar penuh monitor. imej pada asalnya adalah perlu untuk mengambil atau membuat reka bentuk anda sendiri dengan sambungan ini, di mana anda akan memaparkan halaman laman web ini. Hanya apabila imej latar belakang itu siap, seret ke dalam folder yang dinamakan «Images». Di dalamnya, kita akan menyimpan semua imej yang digunakan, animasi dan fail grafik yang lain. Folder ini perlu diletakkan di dalam direktori akar dengan semua fail html anda. Sekarang anda boleh bergerak dan kod. Terdapat beberapa pilihan untuk kod bertulis, yang mana latar belakang akan menukar gambar.

1. Tulis tag atribut.
2. Melalui gaya CSS kod HTML.
3. Tulis gaya CSS dalam fail yang berasingan.

Seperti dalam HTML untuk membuat imej latar belakang, anda membuat keputusan, tetapi saya ingin mengatakan beberapa perkataan tentang bagaimana ia akan menjadi yang paling optimum. Kaedah pertama adalah dengan menulis melalui atribut tag telah lama menjadi usang. Pilihan kedua digunakan jarang sekali, kerana ia ternyata bahawa banyak kod yang sama. Pilihan ketiga adalah yang paling biasa dan berkesan. Berikut ialah contoh tag HTML:

1. Kaedah rakaman pertama melalui tag atribut (badan) dalam fail index.htm. Ia disimpan di dalam borang ini: (latar belakang badan = "folder_name / Nazvanie_kartinki.rasshirenie") (/ badan). Iaitu, jika kita mempunyai gambar dengan tajuk «Gambar» dan lanjutan JPG, dan folder yang kita menamakan «Images», kemudian kemasukan HTML-kod akan kelihatan seperti ini: (latar belakang badan = "Imej / picture.jpg") ... (/ badan) .
2. Kaedah kedua melibatkan rakaman gaya CSS, tetapi ia ditulis dalam fail yang sama dengan index.htm nama. (Badan style = "background: url ( '../ Images / picture.jpg')").
3. Kaedah ketiga rakaman dibuat dalam dua fail. Dokumen dengan tag nama index.htm (kepala) ditulis seperti garis: (kepala) (link rel = "stylesheet" type = "text / css" href = "http: // tapak / artikel / 193.110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ head). Fail dipanggil gaya style.css telah menulis: body {background: url (Imej / picture.jpg ')}.

Seperti dalam HTML untuk membuat imej latar belakang, kita faham. Sekarang anda perlu memikirkan bagaimana untuk meregangkan imej seluruh lebar keseluruhan skrin.

Cara-cara untuk meregangkan imej latar belakang dengan lebar tingkap

Kami mewakili skrin kami dalam bentuk peratusan. Ia ternyata bahawa seluruh lebar dan panjang skrin akan menjadi 100% × 100%. Kita perlu untuk meregangkan imej untuk lebar ini. Tambah ke fail imej garis rakaman style.css yang akan meregangkan imej atas seluruh lebar dan panjang monitor. Kerana ia ditulis dalam gaya CSS? Ia mudah!

badan

{

background: url (Imej / picture.jpg ')

latar belakang-size: 100%; / * Jawatan ini adalah sesuai untuk kebanyakan pelayar moden * /

}

Oleh itu, kita digambarkan bagaimana untuk membuat latar belakang gambar dalam html pada skrin. Terdapat juga kaedah rakaman dalam fail index.htm yang. Walaupun kaedah ini dan ketinggalan zaman, tetapi untuk pemula adalah perlu untuk mengetahui dan memahami. Tag (kepala) (gaya) div {background-size: perlindungan; } (/ Style) (/ kepala), rekod ini bermakna bahawa kita memperuntukkan satu unit khas untuk latar belakang, yang akan berada pada kedudukan yang lebih lebar keseluruhan tetingkap. Kami telah mempertimbangkan dua cara, bagaimana untuk membuat laman web html gambar latar belakang, supaya imej diregangkan untuk lebar keseluruhan skrin dalam mana-mana pelayar moden.

Bagaimana untuk membuat latar belakang yang tetap

Jika anda memutuskan untuk menggunakan gambar sebagai latar belakang sumber web masa depan, maka anda hanya perlu tahu bagaimana untuk membuat ia tetap, supaya ia tidak diregangkan panjang dan tidak merosakkan penampilan estetik. Hanya dengan menggunakan kod HTML untuk mendaftar tambahan kecil. Anda perlu untuk memfailkan style.css untuk menambah frasa selepas background: url (Imej / picture.jpg ') tetap; atau sebaliknya ditambah selepas koma bertitik talian berasingan - Kedudukan: tetap. Oleh itu, kertas dinding anda akan ditetapkan. Semasa menatal kandungan di laman web, anda akan melihat bahawa teks baris bergerak, tetapi latar belakang tetap di tempat. Jadi, anda belajar bagaimana untuk melakukan imej latar belakang html, dalam beberapa cara.

Bekerja dengan Jadual dalam HTML

Ramai pemaju web berpengalaman, berhadapan dengan meja dan blok, sering tidak memahami bagaimana untuk membuat jadual latar belakang imej html. Seperti semua pasukan HTML dan CSS gaya, bahasa pengaturcaraan web adalah agak mudah. Dan penyelesaian kepada masalah ini adalah untuk menulis sepasang baris kod. Anda seharusnya tahu bahawa menulis jadual baris dan lajur, masing-masing, seperti yang ditunjukkan oleh (tr) dan (td) tag. Membuat latar belakang meja dalam bentuk imej, ia adalah perlu untuk menambah tag (jadual), (tr) atau (td) frasa yang mudah dengan merujuk kepada imej rujukan: latar belakang = gambar URL. Untuk kejelasan, kami memberi beberapa contoh.

Meja dengan gambar dan bukannya latar belakang: contoh HTML

Menarik meja 2x3 dan menjadikannya imej latar belakang yang disimpan dalam folder "Imej": (latar belakang Rajah = "Imej / picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ jadual). Jadi meja kami akan dilukis dengan latar belakang gambar.

Kini menarik saiz plat sama 2x3, tetapi memasukkan gambar di ruangan bernombor 1, 4, 5 dan 6. (jadual) (tr) (latar belakang td = "Imej / picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (latar belakang td = "Imej / picture.jpg") 4 (/ td) (latar belakang td = "Imej / picture.jpg") 5 ( / td) (latar belakang td = "Imej / picture.jpg") 6 (/ td) (/ tr) (/ jadual). Selepas menonton kita dapat melihat bahawa latar belakang hanya muncul dalam sel-sel di mana kita didaftarkan dan bukan keseluruhan jadual.

laman keserasian pelayar

Terdapat perkara yang sedemikian sebagai sumber keserasian web pelayar. Ini bermakna bahawa laman web anda adalah sama juga dipaparkan dalam jenis dan versi pelayar yang berbeza. Ia perlu kod HTML dan CSS gaya untuk menyesuaikan pelayar perlu. Selain itu, dalam era moden telefon pintar, banyak pemaju web cuba untuk membuat laman dan disesuaikan untuk versi mudah alih dan lihat komputer.