Bagaimana untuk Mencipta Warna Latar Belakang Lebar 50% dalam CSS Tanpa Memecah Keserasian Pelayar Lama?

CSS: Mencapai Warna Latar Belakang Lebar 50%

Dalam reka bentuk web, mencipta latar belakang yang meliputi hanya sebahagian daripada skrin, seperti 50% daripada lebarnya, adalah keperluan biasa. Walau bagaimanapun, persoalan timbul: bagaimana kita mencapai ini tanpa menggunakan kaedah yang tidak disokong oleh pelayar lama? Artikel ini meneroka pendekatan alternatif untuk menggunakan warna latar belakang yang meliputi 50% lebar tetingkap.

Latar Belakang Dua Warna Menggunakan Div

Untuk penyemak imbas seperti IE7/8 yang tidak menyokong latar belakang -size property, kita boleh menggunakan penyelesaian dengan mencipta elemen div tetap:

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

Div ini, diletakkan tetap di bahagian atas kiri, mengisi separuh skrin dengan warna latar belakang, memberikan kesan latar belakang dua warna yang diingini. Laraskan warna latar belakang mengikut keperluan.

Kecerunan Linear untuk Penyemak Imbas Moden

Jika sokongan untuk penyemak imbas lama tidak membimbangkan, kami boleh menggunakan kecerunan linear dalam sifat latar belakang badan:

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

CSS ini mencipta pembahagian yang tajam antara dua warna pada tanda separuh jalan, menghasilkan latar belakang yang beralih dengan lancar daripada satu warna kepada yang lain.

Berbilang Latar Belakang dengan Saiz Latar Belakang

Untuk penyemak imbas yang menyokong saiz latar belakang, kami boleh menggabungkan warna latar belakang pada elemen html dengan imej latar belakang pada badan:

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

Pendekatan ini menghasilkan latar belakang yang meliputi 50% lebar tingkap, menggunakan sama ada warna pepejal atau imej.

Nota: Memastikan Latar Belakang Skrin Penuh

Dalam semua contoh, menetapkan ketinggian html dan elemen badan kepada 100% memastikan latar belakang meliputi keseluruhan paparan, walaupun halaman kandungan lebih pendek. Ini ialah amalan yang disyorkan untuk kesan latar belakang skrin penuh.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Warna Latar Belakang Lebar 50% dalam CSS Tanpa Memecah Keserasian Pelayar Lama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!