Bagaimanakah Saya Boleh Mencipta Latar Belakang Dua Warna Yang Menduduki 50% Lebar Tetingkap, Mempertimbangkan Keserasian Penyemak Imbas?

CSS: Tetapkan Warna Latar Belakang Yang Mengambil 50% Lebar Tetingkap

Dalam percubaan untuk mencipta latar belakang yang dibahagikan kepada dua warna berbeza pada web halaman, sifat warna latar belakang telah digunakan pada teg badan, manakala satu lagi digunakan pada div yang merangkumi keseluruhan tetingkap. Walau bagaimanapun, sifat bersaiz latar belakang tidak serasi dengan IE7/8, menjadikan penyelesaian ini tidak praktikal.

Sokongan Penyemak Imbas Lama

Untuk situasi di mana penyemak imbas lama menimbulkan had, pertimbangkan untuk menggunakan elemen div yang berasingan, diposisikan dalam halaman, untuk mencapai kesan yang diingini:

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

Contoh: http://jsfiddle.net/PLfLW/1704/

Pendekatan ini menggunakan div tetap yang meliputi separuh skrin, kekal pegun walaupun pengguna menatal. Beberapa pelarasan pada indeks-z mungkin diperlukan untuk memastikan elemen halaman lain diletakkan dengan betul.

Pelayar Moden

Untuk penyemak imbas dengan sokongan yang lebih terkini, pertimbangkan kaedah alternatif ini:

Kecerunan Linear:

Teknik ini adalah yang paling mudah. Dengan menggunakan kecerunan linear dalam sifat latar belakang elemen badan, pelbagai kesan boleh dicapai:

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

Contoh: http://jsfiddle.net/v14m59pq/2/

Berbilang Latar Belakang dengan saiz latar belakang:

Di sini, warna latar belakang ialah diberikan kepada elemen html, manakala imej latar belakang digunakan pada badan. Sifat bersaiz latar belakang kemudiannya digunakan untuk menetapkan lebar imej kepada 50% halaman:

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;
}

Contoh: http://jsfiddle.net/6vhshyxg/2/

Nota Tambahan:

Dalam contoh untuk penyemak imbas moden, html dan badan elemen kedua-duanya diberi ketinggian 100%. Ini memastikan bahawa walaupun kandungan halaman lebih pendek daripada port pandangan, latar belakang memanjang ke ketinggian penuh skrin pengguna. Ia secara amnya dianggap sebagai amalan yang baik untuk menetapkan ketinggian yang jelas untuk elemen ini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Latar Belakang Dua Warna Yang Menduduki 50% Lebar Tetingkap, Mempertimbangkan Keserasian Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!