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!

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Bagaimana untuk memperbaiki KB5055612 gagal dipasang di Windows 10?

4 minggu yang lalu By DDD

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

3 minggu yang lalu By DDD

Nordhold: Sistem Fusion, dijelaskan

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Java

1671

14

Tutorial CakePHP

1428

52

Tutorial Laravel

1331

25

Tutorial PHP

1276

29

Tutorial C#

1256

24

Tunjukkan Lagi