Cara Menukar Warna Latar Belakang Dengan CSS

Cara Menukar Warna Latar Belakang Dengan CSS

Salah satu momen paling menggembirakan dalam karier pemaju front-end baru adalah belajar bagaimana mengubah warna latar belakang laman web.





Bekerja dengan HTML sangat bagus dan semuanya, tetapi hanya dengan beberapa baris CSS anda dapat menjadikan halaman anda, dan perjalanan pengaturcaraan anda, menjadi hidup.



Panduan ini akan merangkumi semua yang perlu anda ketahui mengenai cara menukar warna latar belakang dengan CSS.





Dapatkan Persediaan

Mari kita buat sedikit kerja awal.

mod gelap penjelajah fail tidak berfungsi

Catatan : Saya cadangkan menggunakan Kod Visual Studio dengan Sambungan pelayan langsung untuk melihat perubahan dalam masa nyata semasa anda mengemas kini HTML dan CSS.



  1. Buat folder untuk fail projek anda.
  2. Buat sebuah indeks.html fail untuk menempatkan HTML anda. Anda boleh menggunakan kod plat boiler, atau hanya menyediakan beberapa , , dan tanda nama.
  3. Buat a gaya.css fail untuk CSS anda.
  4. Pautkan fail CSS anda dengan HTML dengan meletakkan di dalam tanda nama.

Sekarang anda sudah bersedia untuk mula mengedit CSS.

Berkaitan: Cara Membuat Laman Web Boilerplate



Cara Menukar Warna Latar Belakang Dengan CSS

Cara paling mudah untuk menukar warna latar belakang adalah dengan menyasarkan badan teg. Kemudian, edit warna latar belakang harta benda. Anda boleh mendapatkan kod warna dengan mencari dan menggunakan pelanjutan penyemak imbas Google Color Picker

body {
background-color: rgb(191, 214, 255);
}

Kod ini mengubah latar belakang menjadi biru muda yang bagus.



The warna latar belakang harta tanah menerima warna dalam enam bentuk yang berbeza:

  • nama : lightskyblue; (untuk jarak dekat)
  • kod hex : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); di mana ke adalah alpha (kelegapan)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); di mana ke adalah alpha (kelegapan)

Gunakan singkatan latar belakang harta di tempat warna latar belakang untuk memotong kod tambahan. Anda boleh mengubah warna latar belakang elemen HTML apa pun menggunakan kaedah ini.

Buat a elemen dan berikan kelas - dalam kes ini, kelasnya adalah panel . Tetapkannya ketinggian dan lebar hartanah di CSS. Pilih elemen dalam CSS dan warnakan.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

Di sini anda dapat melihat badan latar belakang harta digayakan secara bebas daripada .panel latar belakang harta benda.

Properti latar belakang juga menerima kecerunan:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Cara Menukar Gambar Latar di CSS

Bagaimana jika anda mahu latar belakang menjadi gambar dan bukannya warna atau kecerunan yang padat? The shorthand latar belakang harta adalah kawan yang tidak asing lagi.

Pastikan gambar berada di folder yang sama dengan fail HTML dan CSS anda. Jika tidak, anda perlu menggunakan jalur fail di dalam kurungan dan bukan hanya nama:

body {
background: url(leaves-and-trees.jpg)
}

Wah! Nampaknya gambar terlalu diperbesar. Anda boleh memperbaikinya dengan ukuran latar belakang harta benda.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

Untuk menggunakan singkatan latar belakang harta tanah bersempena dengan ukuran latar belakang harta benda penutup , anda juga mesti menentukan latar belakang-kedudukan sifat dan memisahkan nilai dengan garis miring terbalik (walaupun mereka nilai kedudukan lalai seperti kiri atas .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Itupun dia! Gambar latar yang bersaiz betul dalam satu baris CSS.

Baca Lagi: Cara Menetapkan Gambar Latar di CSS

Catatan : Berhati-hati dengan memasukkan gambar latar belakang yang besar yang memakan banyak ruang penyimpanan. Perkara ini sukar dimuatkan di telefon bimbit, di mana anda mempunyai dua saat untuk memberi alasan kepada pengguna untuk terus berada di halaman.

Naik Permainan CSS Anda Dengan kotak bayangan CSS

Bagi pembangun seperti anda, sifat latar belakang warna dan gambar latar adalah berita lama. Nasib baik, selalu ada sesuatu yang baru untuk dipelajari.

Cuba beri kotak anda peningkatan dengan kotak bayangan CSS. Elemen HTML anda tidak pernah kelihatan lebih baik!

Berkongsi Berkongsi Tweet E-mel Cara Menggunakan CSS box-shadow: 13 Trik dan Contohnya

Kotak bland kelihatan membosankan. Bersihkan mereka dengan kesan bayangan kotak CSS!

Baca Seterusnya Topik-topik yang berkaitan
  • Pengaturcaraan
  • Pembangunan Web
  • Reka Bentuk Web
  • CSS
Mengenai Pengarang Marcus Mears III(26 Artikel Diterbitkan)

Marcus adalah peminat teknologi sepanjang hayat dan Penulis Editor di MUO. Dia memulai karier menulis bebasnya pada tahun 2020, meliputi teknologi, alat, aplikasi, dan perisian yang sedang tren. Dia belajar Sains Komputer di kolej dengan fokus pada pembangunan web front-end.

Lagi Dari Marcus Mears III

Langgan buletin kami

Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!

Klik di sini untuk melanggan