Mencoba mencapai latar belakang pada halaman yang "terbelah dua"; dua warna di sisi yang berlawanan (tampaknya dilakukan dengan menetapkan default background-colorpada bodytag, lalu menerapkan yang lain ke divyang merentangkan seluruh lebar jendela).

Saya memang datang dengan solusi tetapi sayangnya background-sizeproperti tidak bekerja di IE7 / 8 yang merupakan keharusan untuk proyek ini -

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

Karena ini hanya tentang warna solid, mungkin ada cara menggunakan hanya background-colorproperti biasa ?

Dukungan Browser yang Lebih Lama

Jika dukungan peramban yang lebih lama adalah suatu keharusan, jadi Anda tidak bisa menggunakan banyak latar belakang atau gradien, Anda mungkin ingin melakukan sesuatu seperti ini pada divelemen cadangan :

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

Contoh: http://jsfiddle.net/PLfLW/1704/

Solusinya menggunakan div tetap tambahan yang mengisi setengah layar. Karena sudah diperbaiki, itu akan tetap di posisi bahkan ketika pengguna Anda menggulir. Anda mungkin harus bermain-main dengan beberapa z-index nanti, untuk memastikan elemen Anda yang lain berada di atas div latar belakang, tetapi seharusnya tidak terlalu rumit.

Jika Anda memiliki masalah, pastikan sisa konten Anda memiliki indeks-z lebih tinggi dari elemen latar belakang dan Anda harus melakukannya dengan baik.

Peramban Modern

Jika browser yang lebih baru adalah satu-satunya masalah Anda, ada beberapa metode lain yang dapat Anda gunakan:

Gradien Linier:

Ini jelas merupakan solusi termudah. Anda dapat menggunakan gradien linier di properti latar belakang tubuh untuk berbagai efek.

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

Ini menyebabkan cutoff keras pada 50% untuk setiap warna, jadi tidak ada "gradien" seperti namanya. Cobalah bereksperimen dengan potongan gaya "50%" untuk melihat efek berbeda yang dapat Anda capai.

Contoh: http://jsfiddle.net/v14m59pq/2/

Berbagai Latar Belakang dengan ukuran latar belakang:

Anda bisa menerapkan warna latar belakang ke htmlelemen, dan kemudian menerapkan gambar latar belakang ke bodyelemen dan menggunakan background-sizeproperti untuk mengaturnya menjadi 50% dari lebar halaman. Ini menghasilkan efek yang serupa, meskipun hanya akan digunakan pada gradien jika Anda menggunakan satu atau dua gambar.

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

Contoh: http://jsfiddle.net/6vhshyxg/2/

CATATAN EKSTRA: Perhatikan bahwa elemen htmldan bodydiatur ke height: 100%dalam contoh yang terakhir. Ini untuk memastikan bahwa bahkan jika konten Anda lebih kecil dari halaman, latar belakang akan setidaknya setinggi viewport pengguna. Tanpa tinggi eksplisit, efek latar belakang hanya akan turun sejauh konten halaman Anda. Ini juga hanya praktik yang baik secara umum.

Solusi sederhana untuk mencapai latar belakang "terbagi dua":

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

Anda juga dapat menggunakan derajat sebagai arah

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);

Anda dapat membuat perbedaan yang sulit daripada gradien linier dengan meletakkan warna kedua ke 0%

Misalnya,

Gradien - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

Perbedaan keras - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Jadi, ini adalah pertanyaan yang sangat lama yang sudah memiliki jawaban yang diterima, tetapi saya percaya bahwa jawaban ini akan dipilih seandainya itu diposting empat tahun yang lalu.

Saya memecahkan masalah ini murni dengan CSS, dan TANPA ELEMEN DOM EXTRA! Ini berarti bahwa dua warna murni itu, hanya warna latar belakang ONE ELEMENT, bukan warna latar belakang dua.

Saya menggunakan gradien dan, karena saya mengatur warna berhenti begitu dekat, sepertinya warnanya berbeda dan tidak berbaur.

Berikut adalah gradien dalam sintaksis asli:

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

Warna #74ABDDdimulai pada 0%dan masih #74ABDDpada 49.9%.

Kemudian, saya memaksa gradien untuk beralih ke warna berikutnya dalam 0.2%ketinggian elemen, menciptakan apa yang tampak sebagai garis yang sangat solid antara kedua warna.

Inilah hasilnya:

Dan inilah JSFiddle saya!

Selamat bersenang-senang!

ini harus bekerja dengan css murni.

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

diuji hanya di Chrome.

Dalam proyek masa lalu yang harus mendukung IE8 + dan saya mencapai ini menggunakan gambar yang dikodekan dalam format data-url.

Gambar itu 2800x1px, setengah dari gambar putih, dan setengah transparan. Bekerja dengan cukup baik.

body {
    /* 50% right white */
    background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;

   /* 50% left white */
   background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}

Anda dapat melihatnya bekerja di sini JsFiddle . Semoga bisa membantu seseorang;)

Saya telah menggunakan :afterdan berfungsi di semua browser utama. silakan periksa tautannya. hanya perlu hati-hati untuk z-index karena setelah ini memiliki posisi absolut.

<div class="splitBg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </div>
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>`
css

    .splitBg{
        background-color:#666;
        position:relative;
        overflow:hidden;
        }
    .splitBg:after{
        width:50%;
        position:absolute;
        right:0;
        top:0;
        content:"";
        display:block;
        height:100%;
        background-color:#06F;
        z-index:1;
        }

tautan biola

Anda bisa menggunakan :afterpemilih-semu untuk mencapai ini, meskipun saya tidak yakin dengan kompatibilitas pemilih itu.

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

Saya telah menggunakan ini untuk memiliki dua gradien berbeda pada latar belakang halaman.

Gunakan pada gambar Anda bg

Perpecahan vertikal

background-size: 50% 100%

Perpecahan horizontal

background-size: 100% 50%

Contoh

.class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}

Salah satu cara untuk mengimplementasikan masalah Anda untuk memasukkan satu baris di dalam div Anda:

background-image: linear-gradient(90deg, black 50%, blue 50%);

Berikut adalah kode demonstrasi dan lebih banyak opsi (horizontal, diagonal, dll.), Anda dapat mengklik "Jalankan cuplikan kode" untuk melihatnya secara langsung.

.abWhiteAndBlack
{
  background-image: linear-gradient(90deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack2
{
  background-image: linear-gradient(180deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack3
{
  background-image: linear-gradient(45deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

Vertical:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>

Opsi yang paling anti peluru dan semantik benar adalah dengan menggunakan elemen semu yang diposisikan tetap ( ::afteratau ::before). Menggunakan teknik ini jangan lupa untuk mengatur z-indexelemen di dalam wadah. Selain itu, content:""aturan untuk pseudo-element diperlukan, jika tidak maka tidak akan di-render.

#container {...}

#content::before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

Contoh langsung: https://jsfiddle.net/xraymutation/pwz7t6we/16/

Ini adalah contoh yang akan berfungsi pada sebagian besar browser.
Pada dasarnya Anda menggunakan dua warna latar belakang, yang pertama mulai dari 0% dan berakhir pada 50% dan yang kedua mulai dari 51% dan berakhir pada 100%

Saya menggunakan orientasi horisontal:

background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

Untuk penyesuaian yang berbeda, Anda dapat menggunakan http://www.colorzilla.com/gradient-editor/

jika Anda ingin menggunakan linear-gradientdengan tinggi 50%:

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;