155

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

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

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

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

css background-color Стаффан Эстберг
источник

280

Поддержка старых браузеров

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

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

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

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

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

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

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

Линейный градиент:

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

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/

EXTRA Примечание: Обратите внимание , что оба htmlи bodyэлементы устанавливаются height: 100%в последних примерах. Это сделано для того, чтобы убедиться, что даже если ваш контент меньше страницы, фон будет иметь высоту, равную высоте окна просмотра пользователя. Без явной высоты фоновый эффект будет уменьшаться только до содержания вашей страницы. Это также просто хорошая практика в целом.

justisb
источник

Спасибо, это помогло мне добиться этого эффекта на столе: jsfiddle.net/c9kp2pde

11

linear-gradientЖесткий отсечка также работает пикселей:background: linear-gradient(90deg, #FFC0CB 225px, #00FFFF 0, #00FFFF 100%);

Якоба ван Линген

1

это работает с 50% 50%, но это не работает, когда я заменил на 25% 75%

datdinhquoc

5

@datdinhquoc Попробуй background: linear-gradient(90deg, #FFC0CB 25%, #00FFFF 0);.

Justisb

55

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

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

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

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

juniperi
источник

14

Это круто, но это градиент. Можно ли провести жесткое различие?

Джон Джотта

23

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

Например,

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

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

Акаша
источник

17

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

Я решил это исключительно с помощью CSS и без дополнительных элементов DOM! Это означает, что два цвета - это просто фоновые цвета ОДНОГО ЭЛЕМЕНТА, а не фоновые цвета двух.

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

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

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

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

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

Вот результат:

Цвет фона

А вот и мой JSFiddle!

Радоваться, веселиться!

WebWanderer
источник

Можно даже пойти с пикселями на это.

background: repeating-linear-gradient(var(--grayLight), var(--grayLight) 430px, rgba(0,0,0,0) 201px, rgba(0,0,0,0) 100%);

Филипп

12

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

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

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

Майкл
источник

9

В прошлом проекте, который должен был поддерживать 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 . Надеюсь, это может кому-то помочь;)

Putuko
источник

4

Я использовал, :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;
        }

скриптовая ссылка

user1162084
источник

3

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

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

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

Awaterujin
источник

1

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

Адам Т. Смит

3

Используйте на своем изображении 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

попробуйте: background-position: center center

Ян Раностай

3

Один из способов реализовать вашу проблему - ввести одну строку внутри вашего 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>

Развернуть фрагмент

Надав
источник

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/

Аркадиуш Лендзян
источник

1

.background{
 background: -webkit-linear-gradient(top, #2897e0 40%, #F1F1F1 40%);
 height:200px;
 
}

.background2{
  background: -webkit-linear-gradient(right, #2897e0 50%, #28e09c 50%);

 height:200px;
 
}

<html>
<body class="one">

<div class="background">
</div>
<div class="background2">
</div>
</body>
</html>

Развернуть фрагмент

Сундарам Сет
источник

0

Это пример, который будет работать в большинстве браузеров.
В основном вы используете два цвета фона, первый из которых начинается с 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

если вы хотите использовать linear-gradientс 50% высоты:

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

Дык нгуен
источник

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

Ответы:

Поддержка старых браузеров

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