Isi

• Melangkah
• Metode 1 dari 4: Mengatur warna latar belakang yang solid
• Metode 2 dari 4: Menggunakan gambar sebagai latar belakang
• Metode 3 dari 4: Buat latar belakang gradien
• Metode 4 dari 4: Setel animasi warna sebagai wallpaper

Untuk dapat menyetel latar belakang halaman web dalam HTML, Anda hanya perlu melakukan sedikit perubahan pada elemen "body" di dalam gaya> / gaya> tag. Langkah-langkahnya bergantung pada tampilan wallpaper yang Anda inginkan. Pelajari cara mengatur latar belakang situs web Anda sebagai warna solid, gambar, gradien atau animasi warna.

Melangkah

Metode 1 dari 4: Mengatur warna latar belakang yang solid

1. Buka file HTML Anda di editor teks favorit Anda. Mulai HTML5, atribut HTML bgcolor> tidak lagi didukung. Warna latar belakang, seperti semua aspek gaya lainnya pada halaman Anda, harus disetel dengan CSS.
2. Tambahkan gaya> / gaya> memberi tag pada dokumen Anda. Semua data gaya untuk halaman Anda (termasuk warna latar belakang) harus dikodekan dalam tag ini. Apakah Anda memiliki gaya> tag sudah ditunjukkan, lalu Anda dapat menggulir ke bagian file itu.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Ketik elemen "body" di dalam gaya> / gaya> tag. Apa pun yang Anda ubah ke elemen "body" di CSS akan memengaruhi seluruh halaman.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Tambahkan properti "background-color" ke elemen "body". Dalam konteks ini, hanya satu ejaan "color" yang akan berhasil (bukan: color).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. Tempatkan warna latar belakang yang diinginkan di belakang "warna latar belakang". Anda sekarang dapat menunjukkan nama warna (hijau, biru, ed, dll.), gunakan kode heksadesimal (heksadesimal) (mis. #000000 untuk hitam, # ff0000 untuk merah, dll.) atau dengan mengetikkan nilai RGB untuk warna (seperti rgb (255.255,0) untuk kuning). Di bawah ini adalah contoh kode heksadesimal, membuat latar belakang sama dengan spanduk wikiHow:

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

   • Putih: #FFFFFF
   • Merah muda terang: # FFCCE6
   • Sienna Terbakar: #993300
   • Indigo - # 4B0082
   • Violet - # EE82EE
   • Lihat HTML Color Picker w3schools.com untuk menemukan kode hex warna apa pun yang Anda inginkan.
6. Gunakan "background-color" untuk menerapkan warna latar belakang ke elemen lain. Sama seperti Anda mengatur elemen tubuh, Anda dapat menggunakan warna latar belakang untuk mengatur latar belakang elemen lainnya. Tempatkan saja elemen tersebut di dalam gaya> / gaya> dengan properti background-color.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {background-color: oranye; } p {warna-latar: rgb (255,0,0); } / style> / head> body> h1> Header ini berlatar belakang oranye / h1> p> Paragraf ini berlatar belakang merah / p> / body> / html>

Metode 2 dari 4: Menggunakan gambar sebagai latar belakang

1. Buka file HTML di editor teks. Banyak orang lebih suka menggunakan gambar sebagai latar belakang situs web mereka. Dengan ini Anda dapat mengatur pola, tekstur, foto atau gambar lain sebagai latar belakang. Dari HTML5, semua latar belakang harus diatur dengan CSS (Cascading Style Sheets) di dalam file gaya> / gaya> tag.
2. Tambahkan gaya> / gaya> tag ke file HTML Anda. Semua data gaya untuk halaman Anda (termasuk warna latar belakang) harus ditunjukkan dalam tag ini. Apakah kamu sudah gaya> tag ditetapkan, gulir ke bagian file itu.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Ketik elemen "body" di dalam gaya> / gaya> tag. Apa pun yang Anda ubah ke elemen "body" di CSS akan memengaruhi seluruh halaman.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Tambahkan properti "background-image" ke elemen "body". Saat menambahkan properti ini, Anda memerlukan nama file dari gambar Anda. Pastikan gambar disimpan di folder yang sama dengan file html (atau tambahkan path lengkap ke file tersebut ke server web Anda).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); warna-latar belakang: # 93B874; } / style> / head> body> / body> / html>

   • Sebaiknya sertakan kode tersebut warna latar belakang untuk berjaga-jaga jika gambar latar tidak dapat dimuat.
5. Lapiskan banyak gambar. Anda dapat menumpuk banyak gambar di atas satu sama lain. Ini dapat berguna jika Anda memiliki gambar dengan latar belakang transparan yang saling melengkapi saat ditumpangkan.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); warna-latar belakang: # 93B874; } / style> / head> body> / body> / html>

   • Gambar pertama ada di atas. Gambar kedua berada di bawah gambar pertama.

Metode 3 dari 4: Buat latar belakang gradien

1. Gunakan CSS untuk membuat latar belakang gradien. Jika Anda mencari sesuatu yang sedikit lebih bergaya daripada warna solid, tetapi tidak sesibuk animasi warna, cobalah latar belakang gradien. Gradien adalah warna yang berubah menjadi persamaan lainnya. Anda dapat menggunakan CSS untuk membuat dan menyesuaikan gradien Anda. Sebelum Anda mulai membuat gradien warna, Anda harus mendapatkan pengetahuan yang cukup tentang dasar-dasar pemformatan halaman web dengan CSS.
2. Pahami sintaks standar. Saat membuat gradien, ada dua bagian informasi yang Anda perlukan: titik awal dan sudut awal, dan warna di mana transisi akan terjadi. Anda dapat memilih beberapa warna yang semuanya tumpang tindih, dan Anda dapat menentukan arah atau sudut gradien.

   background: gradien linier (arah / sudut, color1, color2, color3, dll.);

3. Buat gradien vertikal. Jika Anda tidak menunjukkan arah, warna akan berjalan dari atas ke bawah. Browser yang berbeda memiliki versi fungsi gradien yang berbeda, jadi Anda perlu menambahkan versi kode yang berbeda.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Ini diperlukan untuk memastikan bahwa gradien mencakup seluruh halaman * /} body {background: -webkit-linear-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / background: -o-linear-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / background: -moz-linear-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / background: gradien-linier (# 93B874, # C9DCB9); / * Sintaks default (harus terakhir) * / background-color: # 93B874; / * Sebaiknya setel warna latar belakang, jika gradien tidak dimuat * /} / style> / head> body> / body> / html>

4. Buat gradien dengan arah. Menambahkan arah ke gradien memungkinkan Anda menyesuaikan cara warna bergeser. Perhatikan bahwa browser yang berbeda akan menafsirkan arah secara berbeda. Semuanya akan menunjukkan gradien warna yang sama.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } body {background: -webkit-linear-gradient (kiri, # 93B874, # C9DCB9); / * dari kiri ke kanan * / background: -o-linear-gradient (kanan, # 93B874, # C9DCB9); / * berakhir di kanan * / background: -moz-linear-gradient (kanan, # 93B874, # C9DCB9); / * berakhir di kanan * / background: gradien-linier (ke kanan, # 93B874, # C9DCB9); / * bergerak ke sisi kanan * / background-color: # 93B874; / * Sebaiknya setel warna latar belakang, jika gradien tidak dapat dimuat * /} / style> / head> body> / body> / html>

5. Gunakan properti lain untuk menyesuaikan gradien. Anda dapat melakukan lebih banyak hal dengan gradien.
   • Misalnya, Anda tidak hanya dapat menggunakan lebih dari dua warna, tetapi juga menempatkan persentase di belakang masing-masing warna. Dengan ini Anda dapat menunjukkan berapa banyak ruang yang akan didapat setiap segmen warna.

     latar belakang: gradien-linier (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Tambahkan transparansi pada warna. Dengan ini Anda bisa memudarkan warna. Gunakan warna yang sama untuk memudar dari warna menjadi tidak ada. Anda akan menyukai fungsinya rgba () harus digunakan untuk menunjukkan warna. Nilai akhir menentukan derajat transparansi: 0 untuk buram dan 1 untuk transparan.

     latar belakang: gradien linier (ke kanan, rgba (147,184,116.0), rgba (147,184,116.1));

Metode 4 dari 4: Setel animasi warna sebagai wallpaper

1. Navigasi ke gaya> di kode HTML Anda. Jika Anda menemukan warna background yang solid tetapi tidak, bereksperimenlah dengan mengubah warna background. Dari HTML 5, warna latar belakang harus ditentukan dengan CSS (Cascading Style Sheets). Jika Anda belum pernah mengatur warna latar belakang dengan CSS, baca bagian tentang mengatur warna latar belakang yang solid sebelum mencoba metode ini.
2. Tambahkan properti animasi ke elemen "body". Anda harus menambahkan 2 properti yang berbeda, karena setiap browser memerlukan kode yang berbeda.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s tak terbatas; animasi: colorchange 60s infinite; } / style> / head> body> / body> / html>

   • -webkit-animasi properti diperlukan untuk browser berbasis Chrome (Chrome, Opera, Safari). animasi adalah standar untuk semua browser lainnya.
   • perubahan warna adalah apa yang disebut animasi dalam contoh ini.
   • 60-an adalah durasi (60 detik) dari animasi / transisi. Pastikan untuk mengatur ini untuk webkit dan sintaks default.
   • tak terbatas menunjukkan bahwa animasi harus berulang tanpa batas. Jika Anda lebih suka mengulang warna lalu berhenti di warna terakhir, Anda dapat menghilangkan bagian ini.
3. Tambahkan warna pada animasi Anda. Sekarang Anda akan menggunakan aturan @keyframes untuk mengatur warna latar belakang, serta berapa lama setiap warna dapat dilihat di halaman. Sekali lagi, Anda harus menambahkan beberapa pengkodean untuk berbagai browser.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s tak terbatas; animasi: colorchange 60s infinite; } @ -webkit-keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} @keyframes colorchange {0% {background: # 33FFF3;} 25% {background: # 78281F;} 50% {background: # 117A65;} 75% {background: # DC7633;} 100% {background: # 9B59B6;}} / style> / head> body> / body> / html>

   • Perhatikan bahwa dua baris (@ -webkit-keyframes dan @kartun memiliki nilai yang sama untuk warna dan persentase latar belakang. Ini harus tetap seragam sehingga pengalaman tetap sama untuk semua browser.
   • Persentase (0%, 25%, dll.) mewakili durasi total animasi (60-an). Saat halaman dimuat, warna latar belakang akan disetel ke 0% dan (# 33FFF3). Ketika 25% atau 60 detik dari animasi telah diputar, latar belakang akan bertransisi ke # 78281F, dan seterusnya.
   • Anda dapat mengatur durasi dan warna sesuai keinginan.