Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Membuat Pemisahan Warna Latar Belakang Lebar Tetingkap 50% dalam CSS?
Bagaimana untuk Membuat Pemisahan Warna Latar Belakang Lebar Tetingkap 50% dalam CSS?
- Barbara Streisandasal
- 2024-12-13 20:22:12243semak imbas
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 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: 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. Untuk pelayar lama, pendekatan alternatif melibatkan mencipta Div tetap ini kekal pegun semasa halaman menatal dan mencipta kesan latar belakang belah yang diingini. 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 Berbilang Latar Belakang dengan saiz latar belakang: Kaedah ini melibatkan penggunaan warna latar belakang pada elemen dan kemudian menggunakan Untuk memastikan latar belakang meliputi keseluruhan port pandangan, adalah disyorkan untuk menetapkan ketinggian kedua-duanya yang dan 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!Cabaran dengan Sokongan saiz latar belakang
body {
background: #fff;
}
#wrapper {
background: url(1px.png) repeat-y;
background-size: 50% auto;
width: 100%;
}
Penyelesaian Menggunakan Elemen Div Khusus
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Pilihan untuk Penyemak Imbas Moden
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
html {
height: 100%;
background-color: cyan;
}
body {
height: 100%;
background-image: url('background.jpg');
background-repeat: repeat-y;
background-size: 50% auto;
}
Nota Tambahan