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 собственность?

12 93
css background-color

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