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

Berbilang Warna Latar Belakang untuk Div ​​Tunggal

Dalam senario tertentu, menggunakan berbilang warna latar belakang pada div adalah berfaedah berbanding menggunakan imej latar belakang atau tambahan div. CSS menyediakan pelbagai cara untuk mencapai kesan ini.

1. Kecerunan Linear untuk Dua atau Lebih Warna:

Untuk mencipta "A" dengan dua warna, seperti yang digambarkan dalam imej, gunakan kecerunan linear dengan empat kedudukan:

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);

2. Mencipta Bahagian yang Lebih Kecil untuk "C":

Untuk "C," gunakan kecerunan linear yang serupa dengan "A", tetapi tambahkan pemilih :selepas dengan latar belakang putih untuk mensimulasikan bahagian biru yang lebih kecil:

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%);
.c:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 20%;
    background-color: white;
}

Alternatif yang Diperbaiki untuk "C":

Penyelesaian sebelumnya mencipta kesan bertindih dengan bahagian putih. Alternatif yang lebih baik ialah menggunakan sifat 'background-clip', yang membolehkan anda menggunting latar belakang ke bentuk yang ditentukan:

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%);
background-clip: border-box;

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