Bagaimana untuk Mencapai Pelbagai Warna Latar Belakang dalam Satu Div dengan CSS?

Mencapai Pelbagai Warna Latar Belakang dalam Satu Div

Dalam CSS, menggunakan berbilang warna latar belakang pada satu div boleh dicapai melalui pelbagai teknik. Mari terokai beberapa pilihan dengan senario yang berbeza.

Senario 1: Div dengan Dua Bahagian Sama

Untuk mencipta div dengan dua bahagian yang sama, setiap satu dengan warna yang berbeza, linear kecerunan boleh digunakan. Contohnya, untuk mencapai kesan yang ditunjukkan dalam "A" imej anda, anda boleh menggunakan CSS berikut:

div.A {
  background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
}

Kecerunan ini menggunakan empat kedudukan untuk menentukan peralihan warna. Kedudukan pertama dan kedua menentukan warna kelabu gelap daripada 0% hingga 50%, dan kedudukan ketiga dan keempat menentukan warna kelabu terang daripada 50% hingga 100%.

Senario 2: Div dengan Tidak Sama Bahagian

Untuk mencipta div dengan bahagian ketinggian yang berbeza, anda boleh menggabungkan linear kecerunan dengan unsur pseudo. Contohnya, untuk mencapai kesan yang ditunjukkan dalam "C" imej anda, di mana bahagian biru lebih kecil tingginya daripada bahagian lain, gunakan CSS berikut:

div.C {
  background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%);
}

div.C:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 20%;
  background-color: white;
}

Dalam senario ini, pseudo- elemen (:selepas) ditambahkan pada div. Elemen ini bertindak sebagai bahagian biru "lebih kecil". Ia diletakkan sepenuhnya di sudut kanan bawah div, dengan lebar 50% dan ketinggian 20%. Warna latar belakang ditetapkan kepada putih, yang menindih bahagian biru untuk mencapai kesan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Pelbagai Warna Latar Belakang dalam Satu Div dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!