CSS: Tetapkan Warna Latar Belakang iaitu 50% daripada Tetingkap

Cuba untuk mencapai latar belakang pada halaman yang " terbelah dua"; dua warna pada sisi bertentangan? Nasib baik, terdapat pelbagai cara untuk mencapai kesan ini, bergantung pada keperluan sokongan penyemak imbas anda.

Sokongan Penyemak Imbas Lama

Jika sokongan penyemak imbas yang lebih lama adalah satu kemestian, anda perlu menggunakan div tetap tambahan yang mengisi separuh skrin dan menetapkan latar belakangnya warna.

position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 

}

Pelayar Moden

Jika pelayar yang lebih baharu adalah satu-satunya kebimbangan anda, anda mempunyai lebih banyak lagi pilihan:

Kecerunan Linear:

height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

}

Berbilang Latar Belakang dengan saiz latar belakang:

height: 100%;
background-color: cyan;

}

badan {

height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;

}

Jangan lupa tetapkan ketinggian kepada 100% untuk kedua-dua html dan badan elemen untuk memastikan latar belakang meliputi keseluruhan port pandangan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Latar Belakang Pisah Dua Warna dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!