Bagaimana untuk Membuat Pemisahan Warna Latar Belakang Lebar Tetingkap 50% dalam CSS?

CSS: Mencapai Warna Latar Belakang 50% daripada Lebar Tetingkap

Dalam pembangunan web, kadangkala timbul keperluan untuk mencipta latar belakang yang dibelah dua, menampilkan ciri yang berbeza warna pada sisi yang bertentangan. Secara tradisinya, kesan ini telah dicapai dengan menetapkan warna latar belakang lalai pada teg dan tindanan

dengan warna latar belakang ganti yang menjangkau seluruh lebar tetingkap.

Cabaran dengan Sokongan saiz latar belakang

Satu pendekatan untuk membelah latar belakang ialah menggunakan sifat saiz latar belakang, yang membolehkan untuk menentukan saiz imej latar belakang. Coretan kod ini mencontohkan kaedah ini:

body {
    background: #fff;
}
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

Walau bagaimanapun, penyelesaian ini tidak berdaya maju untuk projek yang memerlukan keserasian dengan Internet Explorer 7/8, kerana penyemak imbas ini tidak menyokong sifat bersaiz latar belakang.

Penyelesaian Menggunakan Elemen Div Khusus

Untuk pelayar lama, pendekatan alternatif melibatkan mencipta

elemen dengan kedudukan tetap:

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

Div tetap ini kekal pegun semasa halaman menatal dan mencipta kesan latar belakang belah yang diingini.

Pilihan untuk Penyemak Imbas Moden

Untuk projek yang menyokong pelayar moden, teknik tambahan boleh digunakan:

Linear Kecerunan:

Kecerunan linear menawarkan cara yang mudah untuk memisahkan latar belakang. Dengan menggunakan kecerunan linear dalam sifat latar belakang , anda boleh membuat potongan keras pada 50% untuk setiap warna:

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

Berbilang Latar Belakang dengan saiz latar belakang:

Kaedah ini melibatkan penggunaan warna latar belakang pada elemen dan kemudian menggunakan imej latar belakang dengan saiz latar belakang ditetapkan kepada 50% daripada lebar halaman:

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

body {
    height: 100%;
    background-image: url('background.jpg');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

Nota Tambahan

Untuk memastikan latar belakang meliputi keseluruhan port pandangan, adalah disyorkan untuk menetapkan ketinggian kedua-duanya yang dan elemen kepada 100%. Ini menjamin bahawa latar belakang akan memanjang hingga ke port pandangan pengguna, walaupun kandungan halaman lebih pendek.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pemisahan Warna Latar Belakang Lebar Tetingkap 50% dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!