Bagaimana untuk Memohon Berbilang Warna Latar Belakang pada Div Tunggal Menggunakan Kecerunan CSS?

Memohon Berbilang Warna Latar Belakang pada Satu Div

Untuk mencapai berbilang warna latar belakang dalam satu div, CSS menyediakan sifat latar belakang yang menyokong linear kecerunan. Begini cara anda boleh melaksanakan senario yang telah anda huraikan:

Senario 1: Mencipta Div Berwarna Split (A)

Untuk mencipta div dengan latar belakang berpecah (serupa dengan "A" dalam imej anda), gunakan kecerunan linear dengan empat hentian warna:

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

Senario 2: Menjadikan Satu Bahagian Lebih Kecil Daripada Yang Lain (C)

Dalam senario "C", anda ingin menjadikan bahagian biru lebih kecil tingginya. Ini boleh dicapai dengan menggunakan :after pseudo-element bersama latar belakang putih:

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%; /* Adjust this value to control the height of the blue portion */
  background-color: white;
}

Nota: Untuk keserasian merentas pelayar yang lebih baik, pertimbangkan untuk menggunakan awalan vendor untuk sifat latar belakang seperti yang dilihat dalam coretan kod yang disediakan.

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