CSS: установите цвет фона, который составляет 50% от ширины окна

попытка достичь фона на странице, которая "разделена на два"; два цвета на противоположных сторонах (по-видимому, сделано путем установки по умолчанию background-color на body тег, а затем применяя другой на div который растягивается на всю ширину окна).

Я придумал решение, но, к сожалению background-size свойство не работает в IE7 / 8, что является обязательным для этого проекта -

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

поскольку речь идет только о сплошных цветах, возможно, есть способ использовать только обычный background-color собственность?

93
background-color css

12 ответов

Поддержка Старых Браузеров

если старая поддержка браузера является обязательным, так что вы не можете пойти с несколькими фонов или градиентов, вы, вероятно, захотите сделать что-то подобное на запасной div элемент:

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

пример:http://jsfiddle.net/PLfLW/1704/

решение использует дополнительный фиксированный div, который заполняет половину экрана. Поскольку он исправлен, он останется на месте даже при прокрутке ваших пользователей. Возможно, вам придется возиться с некоторыми Z-индексами позже, чтобы убедиться, что ваши другие элементы находятся выше фонового div, но это не должно быть слишком сложным.

если у вас есть проблемы, просто убедитесь, что остальная часть вашего контента имеет Z-индекс выше, чем элемент фона, и вы должны быть хорошо идти.

Современные Браузеры

если новые браузеры являются вашей единственной проблемой, есть несколько других методов, которые вы можете использовать:

линейный Градиент:

это, безусловно, самое простое решение. Вы можете использовать линейный градиент в свойстве фона тела для различных эффектов.

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

это вызывает жесткое отсечение на 50% для каждого цвета, поэтому нет "градиента", как следует из названия. Попробуйте поэкспериментировать с" 50% " частью стиля, чтобы увидеть различные эффекты, которые вы можете достичь.

пример: http://jsfiddle.net/v14m59pq/2/

несколько фонов с фоном-размер:

вы можете применить цвет фона для html элемент, а затем применить фоновое изображение к body элемент и использовать background-size свойство, чтобы установить его в 50% от ширины страницы. Это приводит к аналогичному эффекту, хотя на самом деле будет использоваться только над градиентами, если вы используете изображение или два.

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

пример: http://jsfiddle.net/6vhshyxg/2/

ДОПОЛНИТЕЛЬНОЕ ПРИМЕЧАНИЕ: заметил, что html и body элементы установлены в height: 100% в последних примерах. Это необходимо для того, чтобы убедиться, что даже если ваш контент меньше страницы, фон будет по крайней мере высотой окна просмотра пользователя. Без явной высоты фоновый эффект будет уменьшаться только до содержимого страницы. Это также просто хорошая практика в целом.

182

простое решение для достижения" разделения на два " фона:

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

вы также можете использовать градусы в качестве направления

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

это должно работать с чистым css.

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

протестировано только в Chrome.

12

в прошлом проекте, который должен был поддерживать IE8+, и я достиг этого, используя изображение, закодированное в формате data-url.

изображение было 2800x1px, половина изображения белая, а половина прозрачная. Сработало неплохо.

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

вы можете видеть, что он работает здесь JsFiddle. Надеюсь, это может помочь кому-то;)

8

я решил это чисто с помощью CSS и без дополнительных элементов DOM! Это означает, что два цвета-это просто цвета фона одного элемента, а не цвет фона двух.

я использовал градиент и, поскольку я установил цвет останавливается так близко друг к другу, похоже, что цвета отчетливые и что они не сливаются.

вот градиент в собственном синтаксисе:

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

цвета #74ABDD начинается с 0% и еще #74ABDD at 49.9%.

затем я заставляю градиент перейти к следующему цвету внутри 0.2% высоты элементов, создавая то, что кажется очень прочную границу между двумя цветами.

вот результаты:

Split Background Color

и вот мой JSFiddle!

удачи!

8

вы можете сделать жесткое различие вместо линейного градиента, поставив второй цвет на 0%

например,

градиент - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

жесткий различие - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

7

я использовал :after и это работает во всех основных браузерах. пожалуйста, проверьте ссылку. просто нужно быть осторожным для z-индекса, так как после имеет абсолютную позицию.

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

скрипка ссылке

4

можно использовать :after псевдо-селектор для достижения этого, хотя я не уверен в обратной совместимости этого селектора.

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

я использовал это, чтобы иметь два разных градиента на фоне страницы.

2

самым пуленепробиваемым и семантически правильным вариантом было бы использовать фиксированный псевдо-элемент (:after или :before). Используя эту технику не забудьте установить z-index к элементам внутри контейнера. И помни, что content:"" правило для псевдо-элемента необходимо, иначе оно не будет отображаться.

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

живой пример: https://jsfiddle.net/xraymutation/pwz7t6we/16/

2

используйте на своем изображении bg

вертикальное разделение

background-size: 50% 100%

горизонтальное разделение

background-size: 100% 50%

пример

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

один из способов реализовать вашу проблему для ввода одной строки внутри вашего div:

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

вот демонстрационный код и другие параметры (горизонтальный, диагональный и т. д.), вы можете нажать "Запустить фрагмент кода", чтобы увидеть его вживую.

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

Это пример, который будет работать на большинстве браузеров.
В основном вы используете два цвета фона, первый из которых начинается с 0% и заканчивается на 50%, а второй начинается с 51% и заканчивается на 100%

Я использую горизонтальную ориентацию:

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

для различных настроек вы можете использоватьhttp://www.colorzilla.com/gradient-editor/

0