Próba uzyskania tła strony, które jest „podzielone na dwie części”; dwa kolory po przeciwnych stronach (pozornie zrobione przez ustawienie wartości domyślnej background-colorna bodytagu, a następnie nałożenie innego na element, divktóry rozciąga się na całą szerokość okna).

Wymyśliłem rozwiązanie, ale niestety background-sizewłaściwość nie działa w IE7 / 8, co jest koniecznością dla tego projektu -

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

Ponieważ chodzi tylko o jednolite kolory, może istnieje sposób na użycie tylko zwykłej background-colorwłaściwości?

Obsługa starszych przeglądarek

Jeśli obsługa starszych przeglądarek jest koniecznością, więc nie możesz przejść z wieloma tłami lub gradientami, prawdopodobnie będziesz chciał zrobić coś takiego na wolnym divelemencie:

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

Przykład: http://jsfiddle.net/PLfLW/1704/

Rozwiązanie wykorzystuje dodatkowy stały element div, który wypełnia połowę ekranu. Ponieważ jest naprawiony, pozostanie na miejscu nawet podczas przewijania przez użytkowników. Być może będziesz musiał później majstrować przy niektórych indeksach Z, aby upewnić się, że inne elementy znajdują się powyżej elementu div tła, ale nie powinno to być zbyt skomplikowane.

Jeśli masz problemy, po prostu upewnij się, że reszta treści ma indeks Z wyższy niż element tła i powinieneś być gotowy.

Nowoczesne przeglądarki

Jeśli zależy Ci tylko na nowszych przeglądarkach, możesz skorzystać z kilku innych metod:

Gradient liniowy:

To zdecydowanie najłatwiejsze rozwiązanie. Możesz użyć gradientu liniowego we właściwości background ciała, aby uzyskać różne efekty.

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

Powoduje to twarde odcięcie na poziomie 50% dla każdego koloru, więc nie ma „gradientu”, jak sugeruje nazwa. Spróbuj poeksperymentować z „50%” elementem stylu, aby zobaczyć różne efekty, które możesz osiągnąć.

Przykład: http://jsfiddle.net/v14m59pq/2/

Wiele tła z rozmiarem tła:

Możesz zastosować kolor tła do htmlelementu, a następnie zastosować obraz tła do bodyelementu i użyć background-sizewłaściwości, aby ustawić go na 50% szerokości strony. Daje to podobny efekt, chociaż tak naprawdę będzie używany tylko w przypadku gradientów, jeśli używasz jednego lub dwóch obrazów.

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

Przykład: http://jsfiddle.net/6vhshyxg/2/

DODATKOWA UWAGA: Zauważ, że oba elementy htmli bodysą ustawione na height: 100%w ostatnich przykładach. Ma to na celu upewnienie się, że nawet jeśli treść jest mniejsza niż strona, tło będzie miało co najmniej wysokość obszaru roboczego użytkownika. Bez wyraźnej wysokości efekt tła spadnie tylko do zawartości strony. To także ogólnie dobra praktyka.

Proste rozwiązanie pozwalające uzyskać tło „podzielone na dwa”:

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

Możesz również użyć stopni jako kierunku

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

Możesz dokonać trudnego rozróżnienia zamiast liniowego gradientu, ustawiając drugi kolor na 0%

Na przykład,

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

Trudne wyróżnienie - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

Jest to więc okropnie stare pytanie, na które już została zaakceptowana odpowiedź, ale uważam, że ta odpowiedź zostałaby wybrana, gdyby została opublikowana cztery lata temu.

Rozwiązałem to wyłącznie za pomocą CSS i BEZ DODATKOWYCH ELEMENTÓW DOM! Oznacza to, że te dwa kolory to po prostu kolory tła JEDNEGO ELEMENTU, a nie kolor tła dwóch.

Użyłem gradientu i ponieważ ustawiłem stopnie kolorów tak blisko siebie, wygląda na to, że kolory są wyraźne i nie mieszają się.

Oto gradient w natywnej składni:

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

Kolor #74ABDDzaczyna się 0%i jest nadal #74ABDDna 49.9%.

Następnie wymuszam przesunięcie gradientu na mój następny kolor w 0.2%obrębie wysokości elementów, tworząc coś, co wydaje się być bardzo ciągłą linią między dwoma kolorami.

Oto wynik:

A oto mój JSFiddle!

Baw się dobrze!

powinno to działać z czystym CSS.

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

testowane tylko w Chrome.

W poprzednim projekcie, który musiał obsługiwać IE8 + i osiągnąłem to za pomocą obrazu zakodowanego w formacie adresu URL danych.

Obraz miał rozmiar 2800x1px, połowa obrazu była biała, a połowa przezroczysta. Działało całkiem dobrze.

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

Możesz zobaczyć, jak działa tutaj JsFiddle . Mam nadzieję, że to może komuś pomóc;)

Używałem :afteri działa we wszystkich głównych przeglądarkach. proszę sprawdzić link. po prostu trzeba uważać na indeks z, ponieważ po ma pozycję bezwzględną.

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

link skrzypcowy

Możesz użyć :afterpseudo-selektora, aby to osiągnąć, chociaż nie jestem pewien, czy ten selektor jest kompatybilny wstecz.

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

Użyłem tego, aby mieć dwa różne gradienty na tle strony.

Użyj na swoim obrazie bg

Podział pionowy

background-size: 50% 100%

Podział poziomy

background-size: 100% 50%

Przykład

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

Jednym ze sposobów zaimplementowania problemu, aby wprowadzić jeden wiersz w swoim div:

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

Oto kod demonstracyjny i więcej opcji (pozioma, ukośna itp.). Możesz kliknąć „Uruchom fragment kodu”, aby zobaczyć go na żywo.

.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>

Najbardziej kuloodporną i poprawną semantycznie opcją byłoby użycie pseudoelementu o stałej pozycji ( ::afterlub ::before). Korzystając z tej techniki nie zapomnij ustawić z-indexelementów wewnątrz kontenera. Pamiętaj też, że ta content:""reguła dla pseudoelementu jest potrzebna, w przeciwnym razie nie zostanie renderowana.

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

Przykład na żywo: https://jsfiddle.net/xraymutation/pwz7t6we/16/

To jest przykład, który będzie działał na większości przeglądarek.
Zasadniczo używasz dwóch kolorów tła, pierwszy zaczyna się od 0% i kończy na 50%, a drugi zaczyna się od 51% i kończy na 100%

Używam orientacji poziomej:

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

Do różnych ustawień możesz użyć http://www.colorzilla.com/gradient-editor/

jeśli chcesz używać linear-gradientz 50% wysokości:

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