Bagaimana untuk Memohon Berbilang Warna Latar Belakang pada Div Tunggal?

Memohon Berbilang Warna Latar Belakang pada Div Tunggal

Dalam situasi tertentu, menggunakan berbilang warna latar belakang pada satu div boleh berguna. Ini menghapuskan keperluan untuk div atau imej latar belakang tambahan, menjadikannya tugas yang menarik secara visual dan mudah.

Senario 1: Mencapai Bahagian Berwarna Dua Seragam

Untuk mencipta pembahagian dua warna ringkas yang menyerupai "A" dalam imej yang disediakan, anda boleh menggunakan kecerunan linear seperti berikut:

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

Walau bagaimanapun, pendekatan ini mungkin menghasilkan kecerunan tanpa peralihan warna yang tajam seperti yang dilihat dalam "A." Untuk membetulkannya, gunakan kecerunan dengan empat kedudukan, tetapkan warna pertama (kelabu gelap) daripada 0% kepada 50% dan warna kedua (kelabu muda) daripada 50% kepada 100%.

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

Senario 2: Mengawal Saiz Pelbagai Warna Latar Belakang

Untuk mencipta bahagian yang lebih kecil dalam bahagian, seperti bahagian biru dalam "C," anda boleh menggunakan kecerunan linear yang serupa dengan empat kedudukan , tetapi tambahkan pemilih :after dengan latar belakang putih untuk mensimulasikan bahagian kedua yang lebih kecil.

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;
}

Atas ialah kandungan terperinci Bagaimana untuk Memohon Berbilang Warna Latar Belakang pada Div Tunggal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!