Bagaimana untuk Mencipta Pelbagai Warna Latar Belakang pada Elemen DIV Tunggal?

Berbilang Warna Latar Belakang pada Satu DIV

Mencapai Bahagian Warna pada Elemen DIV

Untuk membahagikan elemen DIV kepada berbilang warna bahagian, laraskan bilangan nilai hentian warna dalam kecerunan linear anda. Sebagai contoh, mencipta dua bahagian memerlukan tiga warna, manakala empat warna diperlukan untuk empat bahagian. Dengan menyatakan peratusan di mana setiap peralihan warna berlaku, anda boleh mencipta pembahagian warna yang diingini.

Mengawal Saiz Bahagian Warna

Untuk menjadikan satu bahagian lebih kecil daripada yang lain, gunakan CSS :after pseudo-element. Elemen ini mencipta tindanan yang boleh bersaiz dan diletakkan secara bebas. Menggunakan warna latar belakang yang kontras pada elemen :after mencipta ilusi bahagian warna yang lebih kecil tanpa membahagikan DIV secara fizikal.

Berikut ialah contoh yang dipertingkatkan dengan sokongan silang penyemak imbas yang lebih baik:

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

B. Tiga Bahagian Warna

.three-colors {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 33%,
    #f6f6f6 33%,
    #f6f6f6 66%,
    #33ccff 66%,
    #33ccff 100%
  );
}

C. Bahagian Biru Lebih Kecil

.smaller-blue {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 50%,
    #33ccff 50%,
    #33ccff 100%
  );
  position: relative;
}

.smaller-blue:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  height: 20%;
  background-color: white;
}

Contoh ini menunjukkan cara untuk mencapai berbilang warna latar belakang pada satu elemen DIV dan mengawal saiznya menggunakan elemen pseudo :selepas, menyediakan cara serba boleh untuk mereka bentuk warna kompleks corak tanpa memerlukan elemen HTML tambahan.

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