Cara Mengubah Warna Latar Belakang Dengan CSS

Cara Mengubah Warna Latar Belakang Dengan CSS

Salah satu momen paling menarik dalam karir pengembang front-end pemula adalah mempelajari cara mengubah warna latar belakang halaman web.





Bekerja dengan HTML itu hebat dan semuanya, tetapi hanya dengan beberapa baris CSS Anda dapat membuat halaman Anda, dan perjalanan pemrograman Anda, berkembang menjadi hidup.



Panduan ini akan mencakup semua yang perlu Anda ketahui tentang cara mengubah warna latar belakang dengan CSS.





Dapatkan Pengaturan

Mari kita selesaikan sedikit pekerjaan pendahuluan.

mengapa google menggunakan begitu banyak memori?

Catatan : Saya sarankan menggunakan Kode Visual Studio dengan Ekstensi Server Langsung untuk melihat perubahan secara real-time saat Anda memperbarui HTML dan CSS.



  1. Buat folder untuk file proyek Anda.
  2. Buat sebuah index.html file untuk menampung HTML Anda. Anda dapat menggunakan kode boilerplate, atau hanya mengatur beberapa , , dan tag.
  3. Membuat style.css file untuk CSS Anda.
  4. Tautkan file CSS Anda dengan HTML dengan menempatkan di dalam tag.

Sekarang Anda siap untuk mulai mengedit CSS.

Terkait: Cara Membuat Situs Web Boilerplate



Cara Mengubah Warna Latar Belakang Dengan CSS

Cara paling sederhana untuk mengubah warna latar belakang adalah dengan menargetkan tubuh menandai. Kemudian, edit warna latar belakang Properti. Anda dapat menemukan kode warna dengan mencari dan menggunakan ekstensi browser Google Color Picker

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

Kode ini mengubah latar belakang menjadi biru muda yang bagus.



NS warna latar belakang properti menerima warna dalam enam bentuk berbeda:

  • nama : biru muda; (untuk perkiraan dekat)
  • kode heksa : # bfd6ff;
  • rgb : rgb(191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); di mana ke adalah alfa (opasitas)
  • HSL : hsl(218°, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); di mana ke adalah alfa (opasitas)

Gunakan singkatan Latar Belakang properti menggantikan warna latar belakang untuk memotong kode tambahan. Anda dapat mengubah warna latar belakang elemen HTML apa pun menggunakan metode ini.

Membuat elemen dan berikan kelas — dalam hal ini, kelasnya adalah panel . Tetapkan tinggi dan lebar properti di CSS. Pilih elemen dalam CSS dan warnai.

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 tubuh Latar Belakang properti ditata secara independen dari .panel Latar Belakang Properti.

Properti background juga menerima gradien:

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

Cara Mengubah Gambar Latar Belakang di CSS

Bagaimana jika Anda ingin latar belakang menjadi gambar daripada warna solid atau gradien? Singkatan Latar Belakang properti adalah teman akrab.

Pastikan gambar berada di folder yang sama dengan file HTML dan CSS Anda. Kalau tidak, Anda harus menggunakan jalur file di dalam tanda kurung daripada hanya nama:

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

Wah! Sepertinya gambar terlalu diperbesar. Anda dapat memperbaikinya dengan ukuran latar belakang Properti.

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

Untuk menggunakan singkatan Latar Belakang properti dalam hubungannya dengan ukuran latar belakang Properti menutupi , Anda juga harus menentukan latar belakang-posisi properties dan pisahkan nilainya dengan garis miring terbalik (bahkan jika itu adalah nilai posisi default seperti kiri atas .)

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

Ini dia! Gambar latar belakang berukuran tepat dalam satu baris CSS.

Baca selengkapnya: Cara Mengatur Gambar Latar Belakang di CSS

Catatan : Berhati-hatilah saat menyertakan gambar latar besar yang menghabiskan banyak ruang penyimpanan. Ini mungkin sulit untuk dimuat di seluler, di mana Anda memiliki waktu dua detik untuk memberi pengguna alasan untuk tetap berada di halaman.

Tingkatkan Game CSS Anda Dengan CSS box-shadow

Untuk pengembang seperti Anda, properti background-color dan background-image adalah berita lama. Untungnya, selalu ada sesuatu yang baru untuk dipelajari.

Coba berikan kotak Anda dorongan dengan CSS box-shadow. Elemen HTML Anda tidak pernah terlihat lebih baik!

Membagikan Membagikan Menciak Surel Cara Menggunakan CSS box-shadow: 13 Trik dan Contoh

Kotak hambar terlihat membosankan. Rapikan mereka dengan efek bayangan kotak CSS!

Baca Selanjutnya Topik-topik yang berkaitan
  • Pemrograman
  • Pengembangan web
  • Desain web
  • CSS
Tentang Penulis Marcus Mears III(26 Artikel Diterbitkan)

Marcus adalah penggila teknologi seumur hidup dan Penulis Editor di MUO. Dia memulai karir menulis lepasnya pada tahun 2020, mencakup teknologi yang sedang tren, gadget, aplikasi, dan perangkat lunak. Dia belajar Ilmu Komputer di perguruan tinggi dengan fokus pada pengembangan web front-end.

More From Marcus Mears III

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan