Bagaimanakah Saya Boleh Mencipta Latar Belakang Dua Warna dalam CSS, dengan Satu Warna Menduduki 50% Lebar Tetingkap?

CSS: Tetapkan Warna Latar Belakang iaitu 50% daripada Lebar Tetingkap

Masalah:

Mencari cara untuk memisahkan latar belakang halaman kepada dua warna berbeza, dengan satu warna menduduki 50% daripada lebar tetingkap.

Penyelesaian:

Sokongan Penyemak Imbas Lama

Dalam kes di mana warisan sokongan penyemak imbas adalah penting (cth., IE7/8), pertimbangkan untuk menggunakan div khusus elemen untuk mencapai kesan yang diingini:

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

Div, diposisikan tetap, mengisi separuh skrin dan kekal pada tempatnya semasa menatal.

Pelayar Moden

Untuk pelayar moden, beberapa kaedah alternatif ialah tersedia:

Kecerunan Linear

Memanfaatkan kecerunan linear dalam sifat latar belakang badan menyediakan penyelesaian yang mudah:

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

Ini mewujudkan pembahagian tajam antara warna pada 50% tandakan.

Berbilang Latar Belakang dengan saiz latar belakang

Menetapkan warna latar belakang kepada elemen html dan menggunakan imej latar belakang dengan tetapan saiz latar belakang 50% kepada unsur badan menghasilkan yang serupa hasil:

html {
    height: 100%;
    background-color: cyan;
}

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

Nota: Dalam contoh yang terakhir, ketinggian: 100% ditetapkan untuk kedua-dua html dan kandungan untuk memastikan latar belakang merentangi keseluruhan port pandangan, tanpa mengira ketinggian kandungan halaman.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Latar Belakang Dua Warna dalam CSS, dengan Satu Warna Menduduki 50% Lebar Tetingkap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!