Bagaimana untuk Membuat Pemisahan Warna Latar Belakang Lebar Tetingkap 50% dalam CSS?-tutorial css-php.cn

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

Barbara Streisand

Lepaskan： 2024-12-13 20:22:12

asal

282 orang telah melayarinya

How to Create a 50% Window-Width Background Color Split in 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%;
}

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Bagaimana untuk Mendapatkan Dimensi Imej Latar Belakang Div Menggunakan jQuery? Artikel seterusnya：Mengapa Teks Chrome Saya Kabur Selepas Transformasi CSS, dan Bagaimana Saya Boleh Membetulkannya?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2240

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2381

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

1990

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...